최근 한 프로젝트에서 사진에 타일 워터마크를 추가해야 하는 요구 사항이 발생했습니다.
유사한 효과
이 기능을 완성하기 위해 가장 먼저 떠오르는 것은 캔버스에 노출된 적이 없기 때문에 이 기능을 수행할 때 단계적으로 배우는 과정이 꽤 좋습니다. 이 기능을 단계별로 구현하고 캔버스의 몇 가지 함정을 발견하세요.
이 기능은 캔버스 기반 API가 필요하고 원칙적인 문제도 없기 때문에 여기에 js 코드를 직접 붙여넣겠습니다.
var img = new Image();// 내 프로젝트의 업무는 Taobao 사진에 워터마크를 추가하는 것이므로 여기에 Taobao 제품의 기본 이미지가 있습니다 img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // 캔버스 환경 준비 var canvas = document. getElementById(myCanvas); var ctx = canvas.getContext(2d); // 먼저 캔버스에 이미지를 그립니다. ctx.drawImage(img, 0, 0, 200, 200) // 캔버스에 워터마크를 그립니다. for (let i = 0; i < 20; i++ ) { ctx.rotate((-45 * Math.PI) / 180) // 워터마크의 초기 편향 각도 ctx.font = 20px microsoft yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmm,-300,i * 25); 워터마크 편향 각도를 원본으로 조정하십시오. 그렇지 않으면 계속 회전합니다.}HTML
<캔버스 높이=200 id=myCanvas 너비=200>
귀하의 브라우저는 워터마크를 지원하지 않습니다. Google Chrome을 사용하여 열어주세요.</canvas>
지금 시도해 보고 오류가 있는지 찾아보겠습니다.
'HTMLCanvasElement'에서 'toDataURL' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다.
구글에서 검색해보니 크로스도메인 이미지 문제로 인해 발생하는 것으로 나타났습니다. 그렇다면 어떻게 해결해야 할까요?
새 img에 속성을 추가하기만 하면 됩니다.
img.setAttribute(crossorigin, crossorigin);
따라서 js 부분의 새 img 코드는 다음과 같습니다.
var img = new Image();// 내 프로젝트의 비즈니스는 Taobao 사진에 워터마크를 추가하는 것이므로 여기에 Taobao 제품의 기본 이미지가 있습니다. img.setAttribute(crossorigin, crossorigin);// 이 코드는 이를 해결하는 것입니다 도메인 간 문제. 자신의 사진이고 도메인 간 문제가 없다면 img.src =를 제거할 수 있습니다. 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';
다음으로 완성품을 살펴보겠습니다.
요약위 내용은 이미지에 타일 워터마크를 추가하기 위해 편집자가 소개한 HTML5 캔버스 구현입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다.