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

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

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.캔버스로 합성한 이미지가 흐릿하게 나타납니다.

　문제 설명: 캔버스에서 생성된 이미지에 흐림 문제가 있습니다. 특히 이미지에 식별해야 하는 QR 코드가 있고 사용자가 전혀 식별할 수 없는 경우

　해결 방법: 1) 이 문제를 해결하려면 hidpi-canvas.js 플러그인을 참조하세요.

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

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

문제 설명: 일부 Android 휴대폰에서는 캔버스의 Base64 사진을 내보낼 때 원하는 효과 사진의 절반만 표시될 수 있습니다. 장치 픽셀 비율로 인해 버그가 발생했습니다.

해결 방법: 장치 픽셀 비율을 가져오고 모델을 결정합니다. 여기서는 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. 아이폰에 사진 업로드 시 회전 문제가 있습니다

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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