手摸手教你用canvas实现给图片添加平铺水印

崔晓明发布于2019-08-26 14:04 / 2309人阅读

摘要：最近项目中遇到一个需求，需要把一张图片加上平铺的水印类似这样的效果首先想到的是用完成这种功能，因为我之前也没有接触过，所以做这个功能的时候，就是一步一步的摸索中学习，过程还是挺的，接下来跟我一步步来实现这个功能以及发现一些的坑吧。

最近项目中遇到一个需求，需要把一张图片加上平铺的水印

类似这样的效果

首先想到的是用canvas完成这种功能，因为我之前也没有接触过canvas，所以做这个功能的时候，就是一步一步的摸索中学习，过程还是挺nice的，接下来跟我一步步来实现这个功能以及发现一些canvas的坑吧。

因为这个功能需要的都是一些canvas基础的api，也不涉及什么原理性的问题，这里我就直接贴js代码

var img = new Image();
// 因为我项目中的业务是，要把淘宝的图片添加水印，所以这里就放一个淘宝商品的主图
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((-45 * Math.PI) / 180); // 水印初始偏转角度
      ctx.font = "20px microsoft yahei";
      ctx.fillStyle = "rgba(0,0,0,0.5)";
      ctx.fillText("mmmmmmmmmmmmmmmmmmmmmmm",-300,i * 25);
      ctx.rotate((45 * Math.PI) / 180); // 把水印偏转角度调整为原来的，不然他会一直转
    }

html

这时候来试一下，结果发现有报错

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

在谷歌之后，发现这是图片跨域问题导致的，那么如何解决呢？

只需给咱们new出来的img添加一个属性就好了

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

于是，js部分new img的代码就变成了

var img = new Image();
// 因为我项目中的业务是，要把淘宝的图片添加水印，所以这里就放一个淘宝商品的主图
img.setAttribute("crossorigin", "crossorigin");// 这句代码是为了解决跨域问题，如果你的图片是自己的，没有跨域问题可以去掉
img.src = "https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg";

接下来来看一下我们的成品

大功告成。

如果我的文章解决了你的问题，随手帮我点个赞吧，谢谢了。

专线服务私有云手摸手教你用 js给视频添加水印 asp图片添加水印

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109981.html

手摸手教你用 js 写一个 js 解释器

摘要：手摸手教你用写一个解释器用来编译看起来是个高大上的东西，实际原理其实很简单，无非就是利用对象属性可以用字符串表示这个特性来实现的黑魔法罢了。手摸手教你用 js 写一个 js 解释器用 js 来编译 js 看起来是个高大上的东西，实际原理其实很简单，无非就是利用 js 对象属性可以用字符串表示这个特性来实现的黑魔法罢了。之所以看起来那么深奥, 大概是由于网上现有的教程，都是动不...

hss01248 2019-08-23 17:04 评论0 收藏0
手摸手，带你封装一个vue component

摘要：灵活性和针对性。所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。动手开干接下来我们一起手摸手教改造包装一个插件，只要几分钟就可以封装一个专属于你的。项目地址：vue-countTo配套完整后台demo地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带...

pkhope 2019-08-20 15:48 评论0 收藏0
手摸手教你使用WebSocket[其实WebSocket也不难]

摘要：缺点可能会导致丢失数据在断开重连的这段时间中，恰好双方正在通信。博客前端积累文档公众号以上参考资料教程理解心跳及重连机制协议分钟从入门到精通 showImg(https://segmentfault.com/img/remote/1460000016797888?w=1152&h=720); 在本篇文章之前，WebSocket很多人听说过，没见过，没用过，以为是个很高大上的技术，实际上...

jhhfft 2019-08-23 12:32 评论0 收藏0
手摸手教你使用WebSocket[其实WebSocket也不难]

摘要：缺点可能会导致丢失数据在断开重连的这段时间中，恰好双方正在通信。博客前端积累文档公众号以上参考资料教程理解心跳及重连机制协议分钟从入门到精通 showImg(https://segmentfault.com/img/remote/1460000016797888?w=1152&h=720); 在本篇文章之前，WebSocket很多人听说过，没见过，没用过，以为是个很高大上的技术，实际上...

W_BinaryTree 2019-08-05 15:16 评论0 收藏0
手摸手教你在阿里云服务器部署express项目

摘要：首先声明，我是一名前端，之前没有接触过服务器，秉着好好学习积极向上的精神，最近弄了阿里云个服务器捣鼓，如以下教程中有不正确的地方，欢迎指出，欢迎轻喷。首先声明，我是一名前端，之前没有接触过服务器，秉着好好学习积极向上的精神，最近弄了阿里云个服务器捣鼓，如以下教程中有不正确的地方，欢迎指出，欢迎轻喷。一、购买服务器到阿里云免费领取一个试用版的（新注册用户）https://free....

ispring 2019-07-31 15:17 评论0 收藏0