女王控的博客

使用canvas在前端实现图片水印合成

图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。

随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。

这里通过举个例子,演示如何在前端实现多个图片合成的效果,主要是借助HTML5 canvas相关技术。

使用canvas在前端实现图片水印合成

如果仅仅是普通的合成,例如一个底图和一个PNG水印图片合成,直接使用canvas的drawImage()方法即可,语法如下:

context.drawImage(img,x,y);
context.drawImage(img,x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

各个参数示意为:

参数 描述
img 用来被绘制的图像、画布或视频。
sx 可选。img被绘制区域的起始左上x坐标。
sy 可选。img被绘制区域的起始左上y坐标。
swidth 可选。img被绘制区域的宽度(如果没有后面的width或height参数,则可以伸展或缩小图像)。
sheight 可选。img被绘制区域的高度(如果没有后面的width或height参数,则可以伸展或缩小图像)。
x 画布上放置img的起始x坐标。
y 画布上放置img的起始y坐标。
width 可选。画布上放置img提供的宽度(可能会有图片剪裁效果)。
height 可选。画布上放置img提供的高度(可能会有图片剪裁效果)。

而PNG水印图片的合成,直接连续在使用drawImage()把对应的图片绘制到canvas画布上就可以,原理就是这么简单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://qidian.gtimg.com/lulu/theme/modern/css/common/ui/Button.css">
  <style>
    html,
    body {
      background-color: white;
      margin: 0;
    }

    .clip {
      position: absolute;
      clip: rect(0 0 0 0);
    }
  </style>
</head>
<body>
  <div class="demo">
    <input type="file" id="uploadFile" class="clip" accept="image/png, image/jpeg, image/gif, image/jpg" />
    <label class="ui-button ui-button-primary" for="uploadFile">选择图片</label>
    <img id="imgCover" src="./watermark.png" width="180" height="180" class="clip" />
    <p id="imgUploadX"></p>
  </div>
  <script>
    var eleUploadFile = document.getElementById('uploadFile');
    var eleImgCover = document.getElementById('imgCover');
    var eleImgUploadX = document.getElementById('imgUploadX');

    if (history.pushState) {
      eleUploadFile.addEventListener('change', function (event) {
        var reader = new FileReader();
        var file = event.target.files[0] || event.dataTransfer.files[0];
        reader.onload = function(e) {
          var base64 = e.target.result;
          if (base64.length > 1024 * 50) {
            alert('图片尺寸请小于50K');
            return;
          }
          // 使用canvas合成图片,并base64化
          imgTogether(base64, function (url) {
            // 尺寸
            var size = 180 / (window.devicePixelRatio || 1);
            // 预览和变化
            eleImgUploadX.innerHTML = '<img src="'+ url +'" width="'+ size +'" height="'+ size +'">';
          });
        };
        reader.readAsDataURL(file);
      });

      // canvas图片合成
      var imgTogether = function (url, callback) {
        var canvas = document.createElement('canvas');
        var size = 180;
        canvas.width = size;
        canvas.height = size;
        var context = canvas.getContext('2d');
        // 这是上传图像
        var imgUpload = new Image();
        imgUpload.onload = function () {
          // 绘制
          context.drawImage(imgUpload, 0, 0, size, size, 0,0, size, size);
          // 再次绘制
          context.drawImage(eleImgCover, 0, 0, size, size, 0,0, size, size);
          // 回调
          callback(canvas.toDataURL('image/png'));
        };
        imgUpload.src = url;
      };
    } else if (eleImgUploadX) {
      eleImgUploadX.className = 'remind';
      eleImgUploadX.innerHTML = '本演示IE10+下才有效果';
    }
  </script>
</body>
</html>

使用canvas实现更为复杂的图片合成

具有透明背景的水印图片合成是canvas图片合成中最基本最简单的,如果遇到更为复杂的合成,例如各取50%透明度进行合成,或者经典的mix-blend-mode混合模式的,此时可能就需要借助算法来实现了。

原理为,使用HTML5 canvas getImageData()方法获取图片完整的像素点信息,通过混合算法,对多个图片的像素信息进行合成,合并,重计算,最后把新的图片像素信息通过putImageData()方法重新绘制到画布上,从而实现更为复杂的图片合成效果。

其中,getImageData()方法返回ImageData对象,该对象拷贝了画布指定矩形的像素数据。

ImageData中有个data属性,这个属性是个巨大的数组,而这个数组每四个值为一组,分别对应图片中的每个像素的RGBA值,值范围如下:

R – 红色 (0-255) G – 绿色 (0-255) B – 蓝色 (0-255) A – alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

只要对这些数字进行重新处理,再putImageData()重新放到画布上,图像的效果就会发生变化。

评论

阅读下一篇

focus-within伪类及其交互应用
2020-01-14 17:34:53
0%