基于JS实现压缩图片和加密图片的操作是哪些

发布时间：2023-08-08 11:17:21 所属栏目：语言来源：

导读：这篇文章主要讲解了“基于JS实现压缩图片和加密图片的操作是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于JS实现压缩图片和加密图片的

这篇文章主要讲解了“基于JS实现压缩图片和加密图片的操作是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于JS实现压缩图片和加密图片的操作是什么”吧！

一、压缩图片

压缩原理：

将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。

完整代码：

<body>

压缩后的图片：<span id="sz"></span>

$("#file").change(function(){undefined

var m_this = this;

cutImageBase64(m_this,null,900,0.7);

})

function cutImageBase64(m_this,id,wid,quality) {undefined

var file = m_this.files[0];

var URL = window.URL || window.webkitURL;

var blob = URL.createObjectURL(file);

var base64;

var img = new Image();

img.src = blob;

img.onload = function() {undefined

var that = this;

//生成比例

var w = that.width,

h = that.height,

scale = w / h;

w = wid || w;

h = w / scale;

//生成canvas

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

$(canvas).attr({undefined

width: w,

height: h

});

ctx.drawImage(that, 0, 0, w, h);

// 生成base64

base64 = canvas.toDataURL('image/jpeg', quality || 0.9);

document.getElementById("pic").src=base64;

document.getElementById("sz").innerHTML = parseInt(base64.length/2014,0) + "kb";

};

}

</script>

</body>

压缩后图片的大小是28KB，而原始的文件大小是400多KB：

可见，压缩效果还是非常不错的。

二、加密图片

前面所述的图片压缩，是很实用的技术，接下来才是本文重点，展示一个奇淫技巧：图片加密。

之所以即讲压缩压缩，又谈图片加密，是因为图片加密是于前面压缩技术的基础上完成的。

上面的代码中，toDataURL产生的是图片的base64编码。

Base64编码必须是完整且正确才能正常显示图片。

而只需对此编码做小小修改，哪怕仅是改动一个字符，也会让图片无法正常显示。

那么，接下来将实现这样的效果：

在网页中，用img的src引入加密的base64字符，此时图片是不能显示的。然后，可以输入密码，当密码正确时，解密base64字符，让图片正常显示。

源码：

function jm(){undefined

var pass = prompt('请输入口令','');

if (pass != "1"+"2"+"3"){undefined

alert("口令错误。");

}

else{undefined

var base64_2 = document.getElementById("txt").value.toString();

//解密

var base64_3 = base64_2.substring(0,26) + base64_2.substring(27,base64_2.length);

document.getElementById("pic").src=base64_3;

document.getElementById("bt").style.display = "none";

}

</script>

input中用于存放加密的base64编码，即上文中的js代码功能所生成并加密的内容；

img用于显示解密后的图片；还有一个按钮，点击时调用解密函数。

可能有人已经发现：虽然图片编码经过了加密，而且增加了口令保护，但是只要查看网页源码，就可以知道口令，这样完全没有起到加密的效果。

到目前为止，确实存在这个问题。所以，还要更进一步：

口令可以被看到，是因为javascript代码透明，那么，就要对解密的js代码加密了，加密后，口令将不可见。

这样就实现了完整的图片加密：将图片加密存放到了单独的html中，可以方便的携带、存储、传递。而内容是加密的、口令也是加密的。只有知道口令的人，才能看到图片。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!