포스터 이미지를 합성하기 위해 캔버스를 사용하여 모바일 프로젝트를 공유합니다.

최근에 캔버스를 이용해 포스터 이미지를 합성하는 모바일 프로젝트를 만들었어요. 캔버스 기초가 없어서 인터넷에서 선배님의 데모를 찾아봤는데 개발 과정에서 많은 문제가 발생했어요. 발생한 문제를 요약하고 해결 방법을 다음과 같이 요약합니다.

1. 모바일 캔버스 프로젝트를 전체 화면에 적용할 때 발생하는 문제

문제 설명: 캔버스의 너비와 높이만 설정할 수 있기 때문에 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.캔버스로 합성한 이미지가 흐릿하게 나타납니다.

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

//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. 아이폰에 사진 업로드 시 회전 문제가 있습니다

문제 설명: 캔버스의 교차 도메인에서 요청한 이미지가 있는 경우 캔버스 자체의 보안 메커니즘으로 인해 base64 이미지 내보내기가 실패합니다.

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

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

문제 설명: 캔버스에 그림을 그릴 때 가끔 흰색 화면이 나타납니다. 그림을 읽기 전에 실행됩니다.

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

7. WeChat에서 탐색하는 동안 길게 누르면 사진이 저장되지 않습니다.

문제 설명: 캔버스를 통해 생성된 사진이 저장되지 않거나 WeChat 브라우저에서 길게 누르면 QR 코드가 인식될 수 있습니다. , 일부 안드로이드 사진 이런 일이 발생하면 아이폰은 화질이 너무 높다는 예비 분석이 나온다.

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

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

위 내용은 포스터 이미지를 합성하기 위해 캔버스를 사용하여 모바일 프로젝트를 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!