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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 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使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php封装的page分页类完整实例
2016/10/18 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
json跟xml的对比分析
2008/06/10 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
python with statement 进行文件操作指南
2014/08/22 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python仿抖音表白神器
2019/04/08 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
软件测试笔试题
2012/10/25 面试题
汉语专业应届生求职信
2013/10/01 职场文书
面试必备的求职信
2014/05/25 职场文书
感恩教育月活动总结
2014/07/07 职场文书
党员作风建设自查报告
2014/10/23 职场文书
校运会新闻稿
2015/07/17 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL