html5 canvas完成给照片加上平铺水印

日期：2020-12-11 类型：科技新闻 

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

近期新项目中遇到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下大家的制成品

 

总结

以上所述是网编给大伙儿详细介绍的html5 canvas完成给照片加上平铺水印，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑欢迎给我留言，网编会立即回应大伙儿的！

上一篇：html5 canvas手式解锁源代码共享 返回下一篇：企业网站建设软件