H5 종합 포스터의 자세한 설명

이번에는 H5 합성 포스터에 대한 자세한 설명을 가져왔습니다. H5 합성 포스터의 주의사항은 무엇인가요?

서문: 최근 캔버스를 사용하여 포스터 이미지를 합성하는 모바일 프로젝트를 만들었습니다. 캔버스 기초가 없어서 인터넷에서 선배님의 데모를 검색했지만 개발 과정에서 많은 문제가 발생했습니다. 이제 발생한 문제를 요약하겠습니다. px 값을 설정하고 rem 단위를 지원하지 않아서 모바일 기기 화면에서 사용하고 싶은데 해상도가 복잡하면 캔버스가 전체 화면을 덮는 효과를 얻기 어렵습니다. 해결 방법: js를 통해 휴대폰 화면의 clientWidth 값을 가져와 캔버스에 할당하여 전체 화면에 적응하는 효과를 얻습니다.

var clientWidth = document.documentElement.clientWidth;  
var canvasWidth = Math.floor(clientWidth);  
var canvasHeight = Math.floor(clientWidth*(1334/750));  
$("#main").css('width',canvasWidth+'px');  
$("#main").css('height',canvasHeight+'px');

2. 캔버스에서 합성한 이미지가 흐리게 나타납니다.

문제 설명: 이미지가 생성되었습니다. 캔버스에서 흐릿한 문제가 발생합니다. 특히 사진에 인식해야 하는 QR 코드가 있고 사용자가 이를 전혀 인식할 수 없는 경우 발생합니다. 해결책: 1) hidpi-canvas.js 플러그인을 참조할 수 있습니다. 이 문제를 해결하려면

　　2) 캔버스의 스타일을 변경할 수도 있습니다. 너비와 높이 값을 원하는 크기로 설정한 다음 캔버스의 너비와 높이 값을 각각 x배 늘립니다. 여기서 주의할 점은 캔버스에 그림이나 텍스트를 그릴 때 해당 값도 x배로 확대되어야 한다는 것입니다.

3. 사진 합성 시 일부 모델의 사진이 엉망이 됩니다

문제 설명: 일부 Android 휴대폰에서는 캔버스의 base64 이미지를 내보낼 때 원하는 효과 이미지의 절반만 표시될 수 있는 버그라는 것입니다. 장치 픽셀 비율로 인해 발생합니다.

해결 방법: 장치 픽셀 비율 PR을 가져오고 모델을 결정합니다. 여기서는 iPhone인지 Android인지만 결정했습니다. 이미지를 합성할 때 너비와 높이 값을 원래 크기로 복원합니다. .

//hidpi-canvas将canvas的width和height属性放大pr倍  
if (navigator.userAgent.match(/iphone/i)) {  
    canvas.width = width ;//恢复为原先的大小  
    canvas.height = height ;  
}else{  
    canvas.width = width / pr;//恢复为原先的大小  
    canvas.height = height / pr;  
}

4 아이폰에 사진 업로드 시 회전 문제가 있습니다

문제 설명: 테스트 중 아이폰에 업로드한 사진이 회전되는 현상이 발견됐으나, 저장된 사진 업로드 시에는 이런 문제가 발생하지 않았습니다. 인터넷에서는 안드로이드가 정상입니다.

해결책: 이 문제는 EXIF.js 플러그인을 사용하여 해결할 수 있습니다. 이 플러그인은 사진 촬영 시 각도 및 기타 정보(주로 방향 속성)를 얻어 해당 작업을 수행합니다.

var file = $(this)[0].files[0];  
EXIF.getData(file, function() {    
    EXIF.getAllTags(this);       
    Orientation = EXIF.getTag(this, 'Orientation');    
});

5. 캔버스 그리기 교차 도메인 이미지를 base64 이미지로 내보낼 수 없습니다.

문제 설명: 캔버스에 교차 도메인 요청에서 요청한 이미지가 있는 경우 base64 이미지 내보내기가 실패합니다. 사전 분석은 캔버스 자체의

보안

메커니즘에 의해 이루어져야 합니다.

해결책: 이 버그는 프런트엔드와 백엔드 협력을 통해 해결해야 합니다. 먼저 백엔드에서 이미지를 교차 도메인을 허용하도록 설정한 다음 Img.crossOrigin = "Anonymous"를 설정해야 합니다. 프론트엔드.

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');  
var qrcodeImg = new Image();  
qrcodeImg.crossOrigin = "Anonymous";   
qrcodeImg.src = pageqrcodeimg;  
qrcodeImg.onload=function(){  
        //绘制图片  
}

6. 캔버스가 그림을 그릴 때 흰색 화면이 나타납니다

문제 설명: 캔버스가 그림을 그릴 때 가끔 흰색 화면이 나타납니다. 예비 분석에서는 그림을 읽기 전에 그리기 작업이 수행된다는 것입니다. .

해결 방법: img에 onload 기능을 추가한 다음 이미지를 읽은 후 그리기 작업을 수행합니다.

qrcodeImg.onload=function(){  
        //绘制图片  
}

7. WeChat 브라우저에서 길게 누르면 사진이 저장되지 않습니다문제 설명: 캔버스를 통해 생성된 사진이 저장되지 않거나 WeChat 브라우저에서 길게 누르면 QR 코드가 인식될 수 있습니다. 일부 Android 사진에서 발생합니다. , 그러나 iPhone은 정상이며, 예비 분석에서는 화질이 너무 높다는 것입니다.

해결책: Base64 이미지를 내보낼 때 이미지 품질을 압축합니다.

var mycanvas = document.getElementById("main");  
var image = mycanvas.toDataURL("image/jpeg",0.7);

후기: 기본적으로 지금까지 발생한 문제입니다. 앞으로도 문제가 발생하면 계속 업데이트하겠습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

H5의 서버 푸시 이벤트에 대한 자세한 설명

HTML5 자이로스코프를 기반으로 모바일 애니메이션 효과 구현

H5는 휴대폰이 흔들리는 횟수를 계산합니다

위 내용은 H5 종합 포스터의 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!