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


Posted in HTML / CSS onAugust 20, 2019

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

类似这样的效果
 

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

首先想到的是用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

<canvas
  height="200"
  id="myCanvas"
  width="200"
>你的浏览器不支持水印,请用谷歌浏览器打开</canvas>

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

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';

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

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

大功告成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 #HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 #HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
You might like
php读取数据库信息的几种方法
2008/05/24 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
简单的js计算器实现
2016/10/26 Javascript
babel基本使用详解
2017/02/17 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
深入浅析Python字符编码
2015/11/12 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
python复合条件下的字典排序
2020/12/18 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
铭立家具面试题
2012/12/06 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
《学会合作》教学反思
2014/04/12 职场文书
企业晚会策划方案
2014/05/29 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
公民授权委托书
2014/10/15 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015入党自传书范文
2015/06/26 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书