如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
类别:Web前端 浏览量:2961
时间:2021-10-05 00:42:35 如何使用html5的canvas图
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" alt="如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)" border="0" />
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" alt="如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)" border="0" />
接下来来看一下我们的成品
总结
以上所述是小编给大家介绍的html5 canvas实现给图片添加平铺水印,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣
- UrlHelper、HtmlHelper的使用
- html和js代码结合(JS、CSS和HTML实现注册页面)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- html转ppt(HTML里显示pdf、word、xls、ppt的方法示例)
- html5布局(Html5让容器充满屏幕高度或自适应剩余高度的布局实现)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- tomcat解决乱码(解决tomcat 静态页面html中文乱码的解决终极篇)
- html5 postMessage(html5关于外链嵌入页面通信问题postMessage解决跨域通信)
- html锚点定位
- html的css中怎么选择第三个子元素(CSS中 opacity的设置影响了index层数的改变的问题总结推荐)
- html5 web技术(html5视频常用API接口的实战示例)
- html5常用标记(HTML5超文本标记语言的实现方法)
- html5的新特性
- html基础知识javascript(JavaScript+html实现前端页面滑动验证)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
- 新手的勾线(新手的勾线)
- ()
- 书法欣赏 宋.志南诗《绝句》(宋.志南诗绝句)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
热门推荐
- python网页自动化selenium(python利用selenium进行浏览器爬虫)
- mysql8.0中如何导入数据(mysql8.0.20数据目录迁移的方法)
- apache https配置(Apache httpd 安装module mod_expires、mod_deflate的方法)
- discuz apache伪静态(apache中伪静态配置和使用Apache虚拟主机下Discuz伪静态)
- python怎么导入xlsx(用Python将结果保存为xlsx的方法)
- dedecms中的有些功能如何修改(Dedecms 生成速度慢 的解决办法)
- vue组件之间的通信(超详细的vue组件间通信总结)
- .net中生成不重复的随机数
- SQL Server 数据库自动备份
- 由于Web服务器上的“ISAPI 和CGI 限制”的解决方法
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9