手摸手教你用canvas完成给照片加上平铺水印的完

2021-02-22 19:48 jianzhan

近期新项目中遇到1个要求,必须把1张照片再加平铺的水印

相近这样的实际效果
 


 

最先想起的是用canvas进行这类作用,由于我以前也沒有触碰过canvas,因此做这个作用的情况下,便是1步1步的探求初中习,全过程還是挺nice的,接下来跟我1步步来完成这个作用和发现1些canvas的坑吧。

由于这个作用必须的全是1些canvas基本的api,也不涉及到甚么基本原理性的难题,这里我就立即贴js编码

var img = new Image();
// 由于我新项目中的业务流程是,要把淘宝的照片加上水印,因此这里就放1个淘宝产品的主图
img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';
img.onload = () => {
  // 提前准备canvas自然环境
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  // 先把照片绘图到canvas上
  ctx.drawImage(img, 0, 0, 200, 200);
      // 绘图水印到canvas上
      for (let i = 0; i < 20; i++) {
      ctx.rotate((⑷5 * Math.PI) / 180); // 水印原始偏转角度
      ctx.font = "20px microsoft yahei";
      ctx.fillStyle = "rgba(0,0,0,0.5)";
      ctx.fillText("mmmmmmmmmmmmmmmmmmmmmmm",⑶00,i * 25);
      ctx.rotate((45 * Math.PI) / 180); // 把水印偏转角度调剂为原先的,要不然他会1直转
    }

html

<canvas
  height="200"
  id="myCanvas"
  width="200"
>你的访问器不适用水印,请用谷歌访问器开启</canvas>

这时候候来试1下,結果发现有出错

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

在谷歌以后,发现这是照片跨域难题致使的,那末怎样处理呢?

只需给我们new出来的img加上1个特性就行了

img.setAttribute("crossorigin", "crossorigin");

因而,js一部分new img的编码就变为了

var img = new Image();
// 由于我新项目中的业务流程是,要把淘宝的照片加上水印,因此这里就放1个淘宝产品的主图
img.setAttribute("crossorigin", "crossorigin");// 这句编码是以便处理跨域难题,假如你的照片是自身的,沒有跨域难题能够去掉
img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';

接下来看来1下大家的制成品

大获全胜。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。