手摸手教你用canvas实现给图片添加平铺水印的实现


Posted in HTML / CSS onAugust 20, 2019

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

类似这样的效果
 

手摸手教你用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';

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

手摸手教你用canvas实现给图片添加平铺水印的实现

大功告成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 #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
You might like
php正则校验用户名介绍
2008/07/19 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python 用下标截取字符串的实例
2018/12/25 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
经管应届生求职信
2013/11/17 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
小学语文国培感言
2014/03/04 职场文书
租房协议书范文
2014/08/20 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
Python软件包安装的三种常见方法
2022/07/07 Python