手摸手教你用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 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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生成静态页面详解
2006/12/05 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Python模块相关知识点小结
2020/03/09 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
如何清空python的变量
2020/07/05 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
西门豹教学反思
2014/02/04 职场文书
企业出纳岗位职责
2014/03/12 职场文书
厂区绿化方案
2014/05/08 职场文书
大学活动总结模板
2014/07/10 职场文书
运动会加油稿100字
2014/09/19 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
奖学金个人总结
2015/03/04 职场文书
搬迁通知
2015/04/20 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers