html5 canvas实现给图片添加平铺水印


Posted in HTML / CSS onAugust 20, 2019

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

类似这样的效果

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

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

html5 canvas实现给图片添加平铺水印 

总结

以上所述是小编给大家介绍的html5 canvas实现给图片添加平铺水印,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 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
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
You might like
PHP中的CMS的涵义
2007/03/11 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
Js中sort()方法的用法
2006/11/04 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python字符串的index和find的区别详解
2020/06/20 Python
详解Python中的路径问题
2020/09/02 Python
Python实现简单猜数字游戏
2021/02/03 Python
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
《在山的那边》教学反思
2014/02/23 职场文书
吨的认识教学反思
2014/04/27 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
python中的装饰器该如何使用
2021/06/18 Python