添加水印

使用drawImage甚至可以接受另一个canvas的dom作为参数,因此可以在此基础上得到很多奇妙的效果,比如为图像添加水印。

比如:

#water {
  display: none;
}
<canvas id="canvas"></canvas>
<canvas id="water" width="200" height="40"></canvas>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var water = document.getElementById("water");
var ctx = water.getContext("2d");
var image = new Image();
window.onload = function (e) {
  canvas.width = 640;
  canvas.height = 337;
  image.src = 'https://img.xiaoyulive.top/img/date/20180913/005.jpg';
  ctx.fillStyle='#fff';
  ctx.font = "20px sans-serif"
  ctx.fillText('小昱版权所有', 0, water.height / 2);
  image.onload = function () {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    context.drawImage(water, canvas.width - water.width, canvas.height - water.height, water.width, water.height);
  }
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress