基于Java实现图像加水印

完整代码：(462条消息) 基于Java的水印实现作业.zip资源-优快云文库

用canvas绘制base64的图片与文字，并将canvas转换出来的base64的URL替换掉对应id的原图片的src，换成添加水印的图片

水印实现

因为有跨域请求的问题，双击打开会出问题，请不要双击打开文件

显示水印

操作说明

使用canvas对图片与水印进行覆盖。

采用的方法

用canvas绘制base64的图片与文字，并将canvas转换出来的base64的URL替换掉对应id的原图片的src，换成添加水印的图片。

关键代码说明

• 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);
            }
        }
    }