canvas图片填充位置（手摸手教你用canvas实现给图片添加平铺水印的实现）
时间：2021-10-11 00:43:45 类别：Web前端 浏览量：2894
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如何实现多张图片编辑的图片编辑器）
- html5中canvas标签（html5 canvas绘制网络字体的常用方法）
- canvas处理图片风格（html2 canvas生成清晰的图片实现打印功能）
- 获取canvas画布内容（清除canvas画布内容点擦除+线擦除）
- htmlcanvas的使用（html2canvas生成清晰的图片实现打印的示例代码）
- canvas动态图（canvas绘制太极图的实现示例）
- html5 canvas 特效（JavaScript canvas实现流星特效）
- canvas心形水波（Canvas波浪花环的示例代码）
- canvas技术开发（用canvas显示验证码的实现）
- canvas绘图画圆基本步骤（利用 Canvas实现绘画一个未闭合的带进度条的圆环）
- canvas 动画线段（canvas简单连线动画的实现代码）
- canvas图片裁剪（使用canvas压缩图片上传的方法示例）
- canvas如何开启（canvas实现手机的手势解锁的步骤详细）
- 前端ui 滑动条（AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码）
- canvas两种形式动画（用canvas做一个DVD待机动画的实现代码）
- canvas 裁剪画布（Canvas图片分割效果的实现）
- 你好，新成理人丨成都理工大学2019级新生开学典礼隆重举行（新成理人丨成都理工大学2019级新生开学典礼隆重举行）
- 这部民警编演的红色话剧，讲述了一个不断追寻的故事（这部民警编演的红色话剧）
- 日本菜有什么好吃（日本菜有什么好吃的做法）
- 韩国泡菜做法（韩国泡菜的做法步骤）
- 泰国旅游攻略（泰国旅游攻略必去景点）
- 越难春卷（越难春卷皮怎么用）
热门推荐
- pythonjson格式化原理（详解pythonstr与json类型转换）
- pythonyield使用场景（Yii框架核心组件类实例详解）
- mysql剩余表空间大小（MySQL 表空间碎片的概念及相关问题解决）
- react怎么绑定state（react纯函数组件setState更新页面不刷新的解决）
- thinkphp数据库使用（thinkphp3.2同时连接两个数据库的简单方法）
- app开发自定义导航栏（AmazeUI底部导航栏与分享按钮的示例代码）
- css垂直居中图解（全面总结使用CSS实现水平垂直居中效果的方法）
- pythonmatplotlib散点图怎么画（python使用matplotlib画柱状图、散点图）
- vue用于动态切换组件的内置组件（Vue 可拖拽组件Vue Smooth DnD的使用详解）
- python做出来的游戏按什么键运行（python pygame实现方向键控制小球）
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9