html5 canvas实现给图片添加平铺水印


Posted in HTML / CSS onAugust 20, 2019

最近项目中遇到一个需求,需要把一张图片加上平铺的水印

类似这样的效果

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_400x400.jpg';
img.onload = () => {
  // 准备canvas环境
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  // 先把图片绘制到canvas上
  ctx.drawImage(img, 0, 0, 200, 200);
  // 绘制水印到canvas上
  for (let i = 0; i < 20; i++) {
 
  ctx.rotate((-45 * Math.PI) / 180); // 水印初始偏转角度
  ctx.font = "20px microsoft yahei";
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillText("mmmmmmmmmmmmmmmmmmmmmmm",-300,i * 25);
  ctx.rotate((45 * Math.PI) / 180); // 把水印偏转角度调整为原来的,不然他会一直转
}

 

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_400x400.jpg';

接下来来看一下我们的成品

html5 canvas实现给图片添加平铺水印 

总结

以上所述是小编给大家介绍的html5 canvas实现给图片添加平铺水印,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 #HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
详解PHP数组赋值方法
2015/11/07 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
微信小程序定位当前城市的方法
2018/07/19 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
高中自我鉴定范文
2013/11/03 职场文书
物理教学随笔感言
2014/02/22 职场文书
党支部承诺书范文
2014/03/28 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
python文件目录操作之os模块
2021/05/08 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript