canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
类别:Web前端 浏览量:2894
时间:2021-10-11 00:43:45 canvas图片填充位置
手摸手教你用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="canvas图片填充位置(手摸手教你用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="canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)" border="0" />
接下来来看一下我们的成品
大功告成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas心形水波(Canvas波浪花环的示例代码)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- jscanvas画折线图(js+canvas实现代码雨效果)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- canvas实现滚动列表(Canvas实现贝赛尔曲线轨迹动画的示例代码)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- 微商在朋友圈热卖的 DL减肥咖啡 含违禁药物,你还敢买吗(微商在朋友圈热卖的)
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
热门推荐
- iisweb服务器的启动与配置(win7 iis配置怎么配置 Win7配置IIS服务器图文教程)
- thinkphp5 api开发(thinkphp5框架前后端分离项目实现分页功能的方法分析)
- html5开发图片(HTML5开发动态音频图的实现)
- tomcatxml文件放在哪(Tomcat中修改server.xml和content.xml后自动还原问题解决)
- 网站让浏览器崩溃的原因
- python str类型怎么转换(Python3中的bytes和str类型详解)
- 阿里云的补丁更新应该怎么打(阿里云安骑士企业版有什么作用?)
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- 使用react生命周期的常见情况(react+ts实现简单jira项目的最佳实践记录)
- python3和python区别(Python2与Python3的区别实例总结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9