HTML5 Canvas реализует добавление мозаичных водяных знаков к изображениям.

Недавно я столкнулся с требованием в проекте, которое требовало добавления мозаичного водяного знака к изображению.

Похожий эффект

Первое, что приходит на ум, — это использовать холст для выполнения этой функции. Потому что я никогда раньше не сталкивался с холстом, поэтому, когда я выполняю эту функцию, я просто учусь шаг за шагом. Дальше следуйте за мной. чтобы реализовать это шаг за шагом в функциях и обнаружить некоторые подводные камни Canvas.

Поскольку эта функция требует некоторых 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 вар 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(мммммммммммммммммммм,-300,i * 25); ctx.rotate((45 * Math.PI) / 180); водяной знак Отрегулируйте угол отклонения в соответствии с оригиналом, иначе он будет продолжать вращаться}

HTML

 <высота холста=200 id=ширина myCanvas=200>

Ваш браузер не поддерживает водяные знаки. Чтобы открыть его, используйте Google Chrome</canvas>

Давайте попробуем сейчас и обнаружим, что есть ошибка.

Не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты невозможно экспортировать.

После поиска в Google я обнаружил, что это вызвано проблемой междоменного изображения. Как ее решить?

Просто добавьте атрибут к нашему новому img.

img.setAttribute(crossorigin, crossorigin);

Таким образом, код нового img в части js становится

 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, представленная редактором для добавления мозаичных водяных знаков к изображениям. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя!