完整代码:(462条消息) 基于Java的水印实现作业.zip资源-CSDN文库
用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);
}
}
}