Недавно я столкнулся с требованием в проекте, которое требовало добавления мозаичного водяного знака к изображению.
Похожий эффект
Первое, что приходит на ум, — это использовать холст для выполнения этой функции. Потому что я никогда раньше не сталкивался с холстом, поэтому, когда я выполняю эту функцию, я просто учусь шаг за шагом. Дальше следуйте за мной. чтобы реализовать это шаг за шагом в функциях и обнаружить некоторые подводные камни 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
<canvas height=200 id=myCanvas width=200>Ваш браузер не поддерживает водяные знаки, используйте Google Chrome, чтобы открыть его</canvas>
Давайте попробуем сейчас и обнаружим, что есть ошибка.
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
После поиска в 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';
Далее давайте посмотрим на наш готовый продукт.
Все готово.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.