加水印小程序

鲸鱼源码网

已于 2023-05-17 03:07:04 修改

阅读量2k

点赞数 1

分类专栏：源码文章标签： javascript 前端微信小程序

于 2022-10-01 19:12:32 首次发布

本文链接：https://blog.csdn.net/ztc152521/article/details/127136489

版权

源码专栏收录该内容

16 篇文章 4 订阅

订阅专栏

文章目录

前言
一、如何给图片添加水印？
二、微信小程序加水印
三、程序演示与下载

前言

水印最早使用于造纸行业，主要是形成潜影图文，透过光线可见，具有防止伪造的作用（应用于邮票等）。水印成了防伪的象征，对于计算机工作者水印的用处也是无所不在。例如：csdn存储博文内图片信息时附带作者水印。

一、如何给图片添加水印

水印想必大家都会加，用ps两下就可以搞定。但是如果10张呢？也还可以。100张呢？有些勉强。1000张呢？可能就有些困难了。既然有困难那该如何解决？下面就到了今天的主题了。

使用 JavaScript 中的 canvas 即可实现

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

使用canvas实现的实例

css代码：

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}

HTML代码：

<input type="file" id="uploadFile" class="clip" accept="image/*">
<label class="ui-button ui-button-primary" for="uploadFile">选择图片</label>
<img id="imgCover" src="./watermark.png" class="clip">
<p id="imgUploadX"></p>

JS代码：

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;
          } else {
              // 使用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+下才有效果';
}