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 相关文章推荐
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 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的一些小问题
2010/07/03 PHP
PHP SOCKET编程详解
2015/05/22 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
Js中sort()方法的用法
2006/11/04 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
python实现登录与注册系统
2020/11/30 Python
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
作弊检讨书1000字
2014/02/01 职场文书
优秀员工获奖感言
2014/03/01 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
产品质量保证书范本
2015/02/27 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS