手摸手教你用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实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 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 mysql数据库操作分页类
2008/06/04 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
Node.js学习入门
2017/01/03 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
《小池塘》教学反思
2014/02/28 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL