如何使用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实现给图片添加平铺水印,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- html5自动轮播图代码(HTML5播放实现rtmp流直播)
- html中特殊字符
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5中datalist标签
- html代码简单特效(HTML实现代码雨源码及效果示例)
- html中hr标签
- HTML5 audio标签
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- wordpress如何在文章中自定义html(wordpress添加Html5的表单验证required方法小结)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- html5标签图片(HTML5图片层叠的实现示例)
- html5游戏新手引导开发(使用数据结构给女朋友写个Html5走迷宫游戏)
- html5div例子(html5 外链式实现加减乘除的代码)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
- 营养餐是什么(学校营养餐是什么)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
热门推荐
- 宝塔数据库不小心删了(宝塔面板MySQL数据库经常自动停止的解决方法)
- 如何启动所有docker服务(docker 使用CMD或者ENTRYPOINT命令同时启动多个服务)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- thinkphp数据库使用(thinkphp3.2同时连接两个数据库的简单方法)
- sql两列数据快速对比(在sql中对两列数据进行运算作为新的列操作)
- SQL SERVER中查看一个数据库的表结构及字段
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- vueassets文件路径(vue如何根据url下载非同源文件)
- phpstudy安装步骤(phpStudy学习之php探针)
- linux基本命令pwd(在Linux上使用xargs命令的详细教程)