用JS实现:图片压缩、图片加密
本文将用JavaScript实现两个颇有技术含量的功能:图片压缩、图片加密。
最终效果:可实现将任意图片加密、压缩,并保存到一个独立的html页面中,输入正确的密码,才能看到原图。
第一步、压缩图片
技术原理
将图片读入canvas,并使用canvas的toDataURL方法将图片base64化,在此过程中,可以设定quality值,即图片质量值,值为0.1到1之间,值越小,压缩度越高。
完整代码
保存为html文件即可运行。
<html>
<body><script src="https://code.jquery.com/jquery-1.11.3.js"></script><input id="file" type="file" capture="microphone" accept="image/*"><br>压缩后的图片:<span id="sz"></span><br><img id="pic" ><script>$("#file").change(function(){var m_this = this;cutImageBase64(m_this,null,900,0.7);})function cutImageBase64(m_this,id,wid,quality) {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() {var that = this;//生成比例var w = that.width,h = that.height,scale = w / h;w = wid || w;h = w / scale;//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');$(canvas).attr({width: w,height: h});ctx.drawImage(that, 0, 0, w, h);// 生成base64base64 = canvas.toDataURL('image/jpeg', quality || 0.9);document.getElementById("pic").src=base64;document.getElementById("sz").innerHTML = parseInt(base64.length/2014,0) + "kb";};}</script></body>
</html>
运行效果
压缩率
本例,运行时加载任何一张本地图片。从上图中可以看到,压缩后图片的大小是41KB,而原始的文件大小是1MB:
可见,压缩效果还是非常不错的。
第二步、加密图片
前面所述的图片压缩,是很实用的技术,接下来,展示另一个奇淫技巧:图片加密。
之所以即讲压缩压缩,又谈图片加密,是因为图片加密是于前面压缩技术的基础上完成的。
上面的代码中,toDataURL产生的是图片的base64编码。
Base64编码必须是完整且正确才能正常显示图片。
而只需对此编码做小小修改,哪怕仅是改动一个字符,也会让图片无法正常显示。
那么,程序中给编码某个位置增加一个字符,以达到破坏正确编码进而实现加密的效果:
运行效果,输出加密后的base64编码:
测试一下,这段动过手脚的base64编码以图片方式加载,看是否能显示图片。
效果如下,图片无法正常显示。
那么,接下来将实现这样的效果:
在网页中,用img的src引入加密的base64字符,此时图片是不能显示的。然后,可以输入密码,当密码正确时,解密base64字符,让图片正常显示。
运行效果
输入密码阶段:
密码正确,解密并显示图片:
解密并显示图片的源码:
注:base64编码很长,因此在下面的源码中没有展示,实测时,之前的代码会输出base64编码,复制过来使用即可。
<html><script>function jm(){var pass = prompt('请输入口令','');if (pass != "1"+"2"+"3"){alert("口令错误。");}else{var base64_2 = document.getElementById("encode_base64").src.toString();//解密var base64_3 = base64_2.substring(0,26) + base64_2.substring(27,base64_2.length);document.getElementById("pic").src=base64_3;console.log(base64_3)}}</script><img id="pic"><a onclick="jm()">点此解密并显示图片</a><img id= "encode_base64" src="此处填入之前加密生成的base64编码">
</html>
可能有人已经发现:虽然图片编码经过了加密,而且增加了口令保护,但是只要查看网页源码,就可以知道口令,这样完全没有起到加密的效果。
到目前为止,确实存在这个问题。所以,还要更进一步:
真正的加密
口令可以被看到,是因为javascript代码透明,那么,就要对解密的js代码加密了,加密后,口令将不可见!
用JShaman对JS代码进行混淆加密:
并在JShaman的配置中勾选择“字符串加密”:
加密后的代码将完全找不到之前的口令字符:
在网页中查看,加密的JS代码,其中搜索不到口令“123”:
这样就实现了完整的图片加密:将图片加密存放到了单独的html中,可以方便的携带、存储、传递。
而内容是加密的、口令也是加密的。只有知道口令的人,才能看到图片,安全又私密。
用JS实现:图片压缩、图片加密相关推荐
- java 图片压缩 图片添加水印 thumbnailator javafx
应用截图 启动界面 添加图片 处理结果 项目地址 图片压缩: java 图片压缩 图片添加水印 thumbnailator javafx pom.xml <?xml version=" ...
- IOS 图片上传处理 图片压缩 图片处理
提到从摄像头/相册获取图片是面向终端用户的,由用户去浏览并选择图片为程序使用.在这里,我们需要过UIImagePickerController类来和用户交互. 使用UIImagePickerContr ...
- 录屏——制作gif图片——压缩图片大小
需求:1)看到大牛博客的项目演示.Demo演示基于gif动画,一目了然.那怎么制作gif图片. 2)制作gif图片后,图片一般太大,博客[CSDN]上传本地图片限制大小为2M, ...
- 解决java 图片压缩图片图片变色问题
最近有人遇到在处理在用Java进行图片压缩的时候,压缩后图片的背景色发生了变色,如图所示: 压缩前: 压缩后: 经查阅相关资料后发现可以用阿里巴巴的SImpleImage可以解决这个问题. 主要依赖以 ...
- bitmap compress 图片压缩 图片文件大小处理
android中图片加载到内存中所占空间大小计算:分辨率 height*width*一个像素所占空间大小 解析:decode时指定解码方式为ARGB_8888 代表用8位表示透明度(A),8位表示红色 ...
- 移动端图片上传并生成图片(图片上传/图片压缩/图片绘制/Vue纯前端)
如今用户上传图片,生成图保存分享这些都是h5页面的基操了吧,十分常见,实际操作起来也是满满的技能点,其实也有很多兼容问题的坑. 下面是以vue+elementUI做的一套,有需要的直接拿去- 如果有对 ...
- canvas压缩图片或者进行视频抓拍
最近在项目中遇到一个需要抓拍正在播放的视频中的图片,就像截图一样进行实时抓拍,并且使用了base64进行上传,要求图片不能大于2M. 先上代码 public captureVideo(id) {//获 ...
- 续Gulp使用入门三步压缩图片
gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...
- 【Android 内存优化】图片文件压缩 ( Android 原生 API 提供的图片压缩功能能 | 图片质量压缩 | 图片尺寸压缩 )
文章目录 一. 图片压缩 二. 图片文件压缩类型 三. Android 原生 API 提供的质量压缩 四. Android 原生 API 提供的尺寸压缩 一. 图片压缩 图片压缩 : ① 文件压缩 : ...
- java 向word中添加excel附件并向excel单元格中加入图片并压缩图片并根据图片动态控制单元格高度宽度
word中加入excel附件 excel单元格中插入图片 word freemarker Excel poi 制作, jxl 插入图片 压缩图片/宽高,动态控制单元格高度与宽度 1.word 需要模板 ...
最新文章
- 【Paper】论文中定义、定理、引理、证明分别的含义
- cs架构用什么语言开发_C、C++、Go 语言、Linux服务器开发高级架构师进阶之路
- jQuery.ready() 函数详解
- package.json和package-lock.json
- 怎么转化大小写_亚马逊search term被限制,Search Terms只能写一行怎么办?
- 【python】逻辑运算符总结
- local tomcat 找不到springmvc里的包_唰唰的手撕一个简单的Spring Mvc 框架
- [Java] 蓝桥杯ALGO-12 算法训练 幂方分解
- 计算机数值方法知识点,数值分析 全部 知识点.docx
- Oracle Solaris 11 11/11 新增功能
- 如何设计卷积神经网络CNN?
- 如何使用cmd查看本机IP地址
- 《Redis开发与运维》学习第三章
- 二进制转十六进制 算法实现思想
- Java注解:@IntDef 替换 Emum
- java大量数据导出到Excel
- 用PHP+MYSQL写一个完整的登录界面
- Unity 接入第三方SDK打包闪退
- 圣思园——Java SE Lesson 2
- php 兼容火狐,PHP_CSS兼容IE与火狐浏览器超强兼容代码,如何让你写的代码更兼容火狐 - phpStudy...