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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS3 天气图标动画效果
Apr 06 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 七大优势分析
2009/06/23 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP序列化操作方法分析
2016/09/28 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python魔术方法详解
2015/02/14 Python
Python中super关键字用法实例分析
2015/05/28 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
工地质量标语
2014/06/12 职场文书
500字小学生检讨书
2015/02/19 职场文书
个人道歉信大全
2019/04/11 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python