如何使用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实现给图片添加平铺水印,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣
- html5横向滚动(解决HTML5中滚动到底部的事件问题)
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- html5基础知识入门(萌新HTML5 入门指南二)
- html如何给table加边框(HTML table 表格边框的实现思路)
- html5弹出窗口(Html5页面上如何禁止手机虚拟键盘弹出)
- html标签session什么意思(在html页面中取得session中的值的方法)
- html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- HTML5 <abbr>标签
- html正确的颜色表达方式(HTML文本属性&颜色控制属性的实现)
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- html5循环及条件指令(html5实现滑块功能之type="range"属性)
- html5带图标下拉菜单(html5小程序飞入购物车抛物线绘制运动轨迹点)
- html5 data属性
- html5书写规范教学(Html5踩坑记之mandMobile使用小记)
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
热门推荐
- thinkphp表单提交不到数据(ThinkPHP5.1表单令牌Token失效问题的解决)
- dedecms使用方法(Dedecms织梦CMS搜索页面调用全站最新文章的方法)
- 无盘服务器配置要求(云服务器配置怎么选)
- js宏任务都有哪些(JavaScript 操作宏任务与微任务)
- python异常值处理(一篇文章带你弄懂Python异常传递和自定义异常)
- 数据库创建索引的注意事项
- SqlServer 表单查询问题及解决方法(SqlServer 表单查询问题及解决方法)
- phpmysql网站开发入门与提高(PHP+MySQL+sphinx+scws实现全文检索功能详解)
- 常见的web富文本编辑器有哪些
- sqlservercount函数的用法(SQL Server中row_number函数的常见用法示例详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9