먼저 캔버스 그리기의 기본 방법에 대해 다음과 같이 이야기하겠습니다.
const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); 1.jpg;//이미지가 로드될 때 drawImage에서, 그렇지 않으면 이미지가 아직 로드되지 않을 수 있습니다. img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);} 문법:drawImage(이미지, x, y)
캔버스에 지정된 좌표점부터 시작하여 이미지의 원본 크기에 맞게 전체 이미지를 그립니다.
drawImage(이미지, x, y, 너비, 높이)
캔버스에 지정된 좌표점을 기준으로 전체 이미지를 지정된 크기(너비, 높이)로 그리면 이미지 크기가 자동으로 조정됩니다.
drawImage(이미지, imageX, imageY, imageWidth, imageHeight, x, y, 너비, 높이)
지정된 이미지(왼쪽 위 모서리가 (imageX, imageY), imageWidth가 너비, imageHeight가 높이인 직사각형 부분)의 부분 이미지를 왼쪽 위 모서리 좌표(x, y)를 사용하여 캔버스에 그립니다. 직사각형 영역에서 너비는 너비로, 높이는 높이로 설정됩니다.
이 다중 이미지 스티칭의 비즈니스 시나리오는 다양한 콘텐츠로 사용자 정의된 공유 이미지를 만드는 것입니다. 사용되는 이미지 요소에는 배경 이미지, 외부 링크 이미지, 웹 사이트 로고 및 사용자 정의 QR 코드 이미지가 포함됩니다. 캔버스를 이미지 출력으로 변환할 때 생성됩니다. 세 가지 주요 사항이 있습니다.
1. 이미지의 도메인 간 문제
2. 여러 장의 그림을 그리면 캔버스가 오염될 수 있습니다.
3. 사진의 크기
우선, 이미지의 크로스 도메인 문제가 있습니다. 이 문제에 대한 해결책은 다음과 같습니다.
img.setAttribute('crossOrigin', 'anonymous');교차 도메인 문제를 해결한 후 다중 이미지 스티칭 및 내보내기 후에 새로운 오류 메시지가 나타납니다.
포착되지 않은 DOMException: 'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다. 오염된 캔버스를 내보낼 수 없습니다.
이 문제를 발견했을 때 인터넷에서 정보를 확인해 보니 위의 크로스 도메인 방법을 사용하여 대부분 해결되었지만 내 비즈니스 시나리오에서는 분명히 작동하지 않았습니다.
코드 문제 해결을 통해 배경 이미지 + QR 코드 이미지를 사용할 때 이 오류가 보고되지 않는 것을 확인했습니다. 로고 이미지는 모두 로컬 파일이므로 도메인 간 문제가 아니어야 합니다.
따라서 QR코드 이미지와 배경이미지가 오류가 없는 이유는 QR코드 이미지 소스가 base64 형식이기 때문일 것입니다.
그래서 캔버스를 사용하여 로고 이미지를 base64 형식으로 내보낸 다음 배경 이미지 + QR 코드 이미지와 결합해 보았습니다. 내보낼 때 오류가 보고되지 않았습니다.
여러 이미지를 함께 내보낼 때 오염된 캔버스와 관련된 모든 문제는 이미지 요소를 base64 형식으로 만들면 피할 수 있습니다.
내 비즈니스 시나리오에는 외부 링크 이미지가 있고 모든 외부 링크가 내 웹사이트의 도메인 이름을 처리하여 교차 도메인 처리를 허용하지 않았기 때문에 외부 링크 이미지의 base64 데이터를 생성할 때 img.onerror 이벤트를 사용합니다. 처리. , 기본 다이어그램으로 대체되었습니다.
전체 그림이 그려지기 전에 여러 장의 그림을 따로 처리하기 때문에 Promise 처리를 사용하는 것이 더 나을 수도 있습니다.
이미지 내보내기 크기에 관해서는 다음을 사용해보십시오.
myCanvas.toDataURL('image/jpeg', 인코더옵션)인코더옵션: 사진 품질을 0에서 1까지 선택할 수 있습니다. 값 범위를 초과하면 기본값인 0.92가 사용됩니다. 다른 매개변수는 무시됩니다.
위의 내용은 캔버스에 여러 이미지를 함께 연결하고 내보내는 경험에 대한 개인적인 요약입니다. 모든 사람의 학습에 도움이 되기를 바라며, 또한 모든 사람이 VeVb Wulin Network를 지지해 주기를 바랍니다.