如何使用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中特殊字符
- html5基础知识入门(萌新HTML5 入门指南二)
- html5标签图片(HTML5图片层叠的实现示例)
- 织梦网址首页如何布局(去掉织梦建站或者仿站时首页访问地址后的index.html)
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- html5div例子(html5 外链式实现加减乘除的代码)
- html中hr标签
- html正确的颜色表达方式(HTML文本属性&颜色控制属性的实现)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- html标签的嵌套规则
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- html5video怎么优化(html5 移动端视频video的android兼容去除播放控件、全屏)
- html5代码之翻页(HTML5实现直播间评论滚动效果的代码)
- MVC扩展HtmlHelper实现CheckBoxList
- html5拖拽标签(Html5原生拖拽相关事件简介以及基础实现)
- html5新增特性(总结html5自定义属性有哪些)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
- 《内在美》后,一大波新韩剧来袭,李钟硕朴信惠宋慧乔玄彬回归(一大波新韩剧来袭)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9