【内附源码和文档】水印实现

水印实现

由于跨域请求问题，双击打开会出现问题，请不要双击打开文件

显示水印操作说明

用canvas覆盖图片和水印。

采用的方法

用canvas绘制base64的图片和文字，用添加水印的图片替换canvas转换的base64的URL。

关键代码说明

• 将canvas转换为base64的URL

const base64Url = canvas.toDataURL();cb && cb(base64Url);

• 输入原图像URL参数和水印文本参数并进行转换

__picWM({      url: 'img/960x800-1.jpg',      content: '水印',      cb: (base64Url) => {             document.querySelector('#visible_img').src = base64Url      },});

• 与不同的引用方法兼容

if (typeof module != 'undefined' && module.exports) {        //CMD        module.exports = __picWM;} else if (typeof define == 'function' && define.amd) {        // AMD        define(function () {              return __picWM;        });}

隐式水印操作说明

对于看不见的水印，编码图片，使一些文字隐藏在图片中间，看不见。

采用的方法

图片在canvas中绘制，图片数据与文本数据混合，图片中文本覆盖R+1，即改变RGB中的红色数字，将文本隐式添加到图片中，解密后获得原始文本。

关键代码说明

• 加密代码

var mergeData = function (ctx, newData, color, originalData) {                var oData = originalData.data;                var bit, offset;  // offset的作用是找到alpha通道值，在这里，你需要自己动脑筋                switch (color) {                    case 'R':                        bit = 0;                        offset = 3;                        break;                    case 'G':                        bit = 1;                        offset = 2;                        break;                    case 'B':                        bit = 2;                        offset = 1;                        break;                }                for (var i = 0; i < oData.length; i++) {                    if (i % 4 == bit) {                        // 只处理目标通道                        if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) {                            // 没有信息的像素，该通道最低位置0，但不要越界                            if (oData[i] === 255) {                                oData[i]--;                            } else {                                oData[i]++;                            }                        } else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) {                            // // 信息像素，该通道的最低位置1，想想上面的斑点效果是如何实现的                            oData[i]++;                        }                    }                }                ctx.putImageData(originalData, 0, 0);}

• 加密时调用img.onload

img.onload = function () {       // 在指定区域获取canvas像素信息       ctx.drawImage(img, 0, 0);       originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);       mergeData(ctx, textData, 'R', originalData)};

图片加载实现思路

使用另一个变量存储图片地址，图片地址一开始是空的，直到你能看到图片，即加载图片。

计算公式如下：obj.offsetTop < 可视区高度 + 滚动距离;

为了减少加载次数，window.scroll将多次调用loadimg()函数。添加函数可以减少图片加载次数，优化性能，所有加载操作都是异步的，因此不会影响其性能。

延迟的计算取决于该函数未触发多久。如果该函数在1000ms内触发，则延迟500ms触发，否则将立即触发。

代码实现

window.onload = async function() {        loadImg();    };    //设置了 500ms 的延迟，和 1000ms 超过时间隔 1000ms 未触发函数的，立即执行函数，否则延迟 500ms 执行此函数。    window.addEventListener('scroll', throttle(loadImg, 500, 1000), false);    window.onresize = async function() {        loadImg();    };    function loadImg() {        var aImg = document.getElementsByTagName('img');        var len = aImg.length;        for(var i = 0; i < len; i++) {            var thisImg = aImg[i];            if(thisImg.getAttribute('src') === '') {                // obj.offsetTop < 可视区高度 + 滚动距离;                if(thisImg.offsetTop < document.documentElement.clientHeight +                    (document.documentElement.scrollTop || document.body.scrollTop)) {                    thisImg.setAttribute('src', thisImg.getAttribute('x-src'));                }            }        }    }    function throttle(fn, delay, atleast) {        var timeout = null,            startTime = new Date();        return function() {            var curTime = new Date();            clearTimeout(timeout);            if(curTime - startTime >= atleast) {                fn();                startTime = curTime;            }else {                timeout = setTimeout(fn, delay);            }        }    }

上传到完整的源代码和详细的文档 【WRITE-BUG数字空间]，请自取

https://www.writebug.com/code/0c7d6809-c792-11eded-baec-6479f0e5e323/#