HTML5 캔버스 합성 포스터에서 발생하는 문제 및 솔루션 요약

서문 : 최근 캔버스 합성 포스터 사진이있는 모바일 항목을 만들었습니다. 캔버스 기초가 없으므로 전임자의 데모를 검색했습니다 . 방법은 다음과 같이 요약된다.

문제 설명 : 캔버스의 너비와 높이는 PX 값 만 설정할 수 있고 rem 단위를 지원하지 않기 때문에 모바일 장치 화면 해상도가 복잡 할 때 전체 화면으로 덮인 캔버스의 효과에 도달하기가 어렵습니다. 솔루션 : JS를 통해 휴대폰 화면의 ClientWidth 값을 가져 와서 전체 화면에 적응하는 효과를 달성하기 위해 캔버스에 제공합니다.

 var clientWidth = documentElement.clientWidth = math.floor (clientWidth); px '); $ (#main) .css ('높이 ', canvasheight+'px ');

문제 설명 : 캔버스가 생성 한 그림에는 모호한 문제가 있습니다. 특히 그림에 QR 코드가있는 경우, 인식 해야하는 경우 사용자는 인식 할 수 없습니다.

솔루션 : 1)이 문제를 해결하기 위해 HIDPI-CANVAS.JS 플러그인을 인용 할 수 있습니다.

2) 캔버스 스타일의 너비와 높이 값을 설정하여 원하는 크기를 설정 한 다음 해당 값의 너비와 높이의 값을 각각 확대 할 수 있습니다.

문제 설명 : 일부 안드로이드 폰이 캔버스의 Base64 사진을 내보낼 때, 효과의 영향의 절반 만 표시 할 수 있습니다. 예비 분석은 장비 픽셀 비율로 인한 버그입니다.

솔루션 : 장비 픽셀 비율을 얻으십시오. 여기에서는 iPhone 또는 Android가 아닌지 판단합니다. 원래 크기.

 // hidpi-canvas는 캔버스의 너비와 높이 속성을 확대합니다.

문제 설명 : 테스트 중에 iPhone 휴대 전화가 회전의 사진을 업로드 한 것으로 밝혀졌으며 인터넷에서 업로드 된 사진은 발생하지 않으며 Android는 정상입니다.

솔루션 :이 문제는 exif.js 플러그 -In을 사용하여 해결할 수 있습니다.

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

문제 설명 : 캔버스에 크로스 도메인 요청 사진이있을 때 출력베이스 64 사진은 캔버스 자체의 보안 메커니즘으로 인해 발생합니다.

솔루션 :이 버그는 뒷면과 백 -엔드로 해결해야합니다.

 var qrcodeimg = qrcodecanvas.todaurl ( 'image/jpg');

문제 설명 : 캔버스가 그림을 그릴 때 가끔 흰색 화면 상황이 나타납니다.

솔루션 : onload 기능을 IMG에 추가 한 다음 그림을 읽은 후 도면 작업을 수행하십시오.

 qrcodeimg.onload = function () {// 그림 그리기}

문제 설명 : 캔버스에 의해 생성 된 그림은 QR 코드를 WeChat 브라우저에서 인식 할 수 없습니다.

솔루션 : Base64 그림을 내보낼 때 그림의 품질을 압축하십시오.

 var mycanvas = document.getElementById (main);

PostScript : 현재 발생하는 문제는 기본적으로 문제가 발생하면 계속 업데이트됩니다.

위는이 기사의 모든 내용입니다.