JavaScript压缩并加密图片的方法你了解吗
一、压缩图片
压缩原理：
将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。
完整代码：
<body>
<script src="jquery-3.5.1.min.js"></script>
<input id="file" type="file" capture="microphone" accept="image/*">
压缩后的图片：<span id="sz"></span>
<img id="pic" >
<script>
$("#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编码必须是完整且正确才能正常显示图片。
而只需对此编码做小小修改，哪怕仅是改动一个字符，也会让图片无法正常显示。
那么，程序中给编码某个位置增加一个字符，以达到破坏正确编码进而实现加密的效果：
运行效果，输出加密后的base64编码：
测试一下：
效果如下，图片无法正常显示。
那么，接下来将实现这样的效果：
在网页中，用img的src引入加密的base64字符，此时图片是不能显示的。然后，可以输入密码，当密码正确时，解密base64字符，让图片正常显示。
输入密码：
密码正确，解密并显示图片：
源码：
<script>
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代码加密了，加密后，口令将不可见。
用JShaman对JS代码进行混淆加密：
并在JShaman的配置中勾选择“字符串加密”：
加密后的代码将完全找不到之前的口令字符：
这样就实现了完整的图片加密：将图片加密存放到了单独的html中，可以方便的携带、存储、传递。而内容是加密的、口令也是加密的。只有知道口令的人，才能看到图片。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
本来应该是第二章，接口，但因为闭包实在不懂，所以先看看闭包2010-05-05
今天小编就为大家分享一篇关于Javascript读写cookie的实例源码，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
一句话就可以概括：代码 ( 包括函数 ) 执行时所需要的所有信息就是执行环境。由于 ES 历经多个版本，所以执行环境的标准也一直在变。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
去重是开发中经常会碰到的一个热点问题，这篇文章主要介绍了JavaScript中实现数组去重的10种方法，文中的示例代码讲解详细，感兴趣的可以了解一下2022-11-11
这篇文章主要介绍了tweenjs缓动算法的使用,结合实例形式分析了Tween.js插件的原理与使用技巧,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了深入了解JavaScript 的 WebAssembly,它是由 Google , Microsoft , Mozilla ， Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 ,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇解决Layui当中的导航条动态添加后渲染失败的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了Javascript对象Clone用法,实例分析了javascript对象克隆的相关技巧,需要的朋友可以参考下2015-06-06
广告式的漂浮窗口，想必大家并不陌生吧，下面为大家简单介绍下具体的实现，有需要的朋友可以参考下2013-08-08
js中的preventDefault与stopPropagation详解
本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论