JavaScript奇淫技巧：用密码保护你的照片

avaScript奇淫技巧：密码保护的私密图片

JavaScript奇淫技巧：图片压缩、图片加密

本文将用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;
                //生成canvas
                var canvas=document.createElement('canvas');
                var ctx=canvas.getContext('2d');
                $(canvas).attr({
                    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>
</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中，可以方便的携带、存储、传递。

而内容是加密的、口令也是加密的。只有知道口令的人，才能看到图片，安全又私密。

流程之前肯定得先了解一下gulp.js吧,附上链接,大家自己去看APIgulp.js中文网

下面就来说说怎么使用gulp.js,gulp.js是基于node来使用的,那么问题又来了,nodejs怎么安装,这个大家还是去菜鸟教程看一下;这里就不多说了;

第一步.在终端输入

node -v查看一下你的nodejs是否安装成功,如果安装成功, 就会提示你的版本 ,我的是 v4.4.4;

第二步.全局安装gulp

sudo npm install gulp@latest -g

第三部.安装项目的开发依赖

sudo npm install --save-dev gulp

第四步.在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp=require('gulp');

gulp.task('default', function() {

// 将你的默认的任务代码放在这

});

第五步.安装压缩的模块

css安装模块, gulp-minify-css模块;在命令行输入,

sudo npm install gulp-minify-css

安装成功以后会提示你,警告'

npmWARNdeprecated gulp-minify-css@1.2.4: Please use gulp-clean-css',那你就需要再次安装一下

sudo npm install gulp-clean-css,

安装成功以后就可以用啦;

js模块,gulp-gulify

sudo npm install gulp-uglify@latest

好啦,两个都安装成功了,接下来就是使用的时候啦;直接上代码

var gulp=require('gulp');
var uglify=require('gulp-uglify');
var minfy=require('gulp-minify-css');
// 创建压缩任务
gulp.task('default', function() {
// gulp.src(path)的参数可以为tring也可以为Array,
//每一个元素都是你要压缩的文件的相对路径
gulp.src(['./static/js/a.js',
'./static/js/b.js',
'./static/js/c.js',
'./static/js/d.js',])
.pipe(uglify())
// gulp.dest(path)能被 pipe 进来，并且将会写文件。
//并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。
// 如果某文件夹不存在，将会自动创建它。
.pipe(gulp.dest('./static/min.js'));
gulp.src(['./static/css/a.css',
'./static/css/b.css',
'./static/css/c.css',
'./static/css/d.css'])
.pipe(minfy())
.pipe(gulp.dest('./static/min.css'));
});
学习交流加群：230354270

注意js和css,pipe的时候要引用对哦

文对曾经介绍过的「免费图片压缩工具」进行整理，制作为列表让使用者可更快找到需要的服务，在撰写这篇文章时也测试过所有图片压缩工具都能正常运作，我倾向使用免安装、在线工具，只要打开浏览器就能进行相关操作，更为方便快速。

大家也能照着本文章推荐的服务来试试看，若是未来发现任何服务无法使用，那就试着以其他同类型的服务替代吧！

TinyPNG

网站链接：https://tinypng.com/

曾经有一段时期我经常会使用 TinyPNG 在线图片压缩工具，只要将 PNG 图片拖曳到网站，它会自动远程对图片压缩、优化，将图片文件大幅缩小，但又不会影响画质。TinyPNG 单次可上传最多 20 张图片，支持 PNG、JPG 和 WebP 格式，每张图片最大 5 MB，上传后会自动远程进行图片优化，大幅缩小图片尺寸。

TinyPNG：在线 PNG 图片压缩工具

TinyPNG4Mac 免费图片压缩、优化应用程序（Mac）
TinyPNG 也有 WordPress 图片压缩外挂，上传后自动优化（Compress JPEG & PNG images）

TinyJPG

网站链接：https://tinyjpg.com/

TinyJPG 和 TinyPNG 来自同一个开发商，早期 TinyPNG 只支持 PNG 格式，后来加入 TinyJPG 网站让 JPEG 图片也能使用压缩功能，不过现在两者已经整合在一起了，无论是打开哪一个网站都能正常压缩 WebP、PNG 和 JPEG 三种常见、常用的图片格式，在不破坏原有图文件画质的情况下，可以减少超过 70% 的大小。

Squoosh

网站链接：https://squoosh.app/

Squoosh 是来自 Google 的免费在线图片压缩工具，整合各种强大的图片编码译码器，而且不用额外下载、安装任何软件就能在浏览器进行图片压缩。Squoosh 特色是让用户深入了解各种图片压缩器及选项设定，可自定义性相当高，包括要适应压缩质量、画素、重设图片大小一应俱全。

因为 Squoosh 是一项开放原始码项目，有开发者将它打造为「脱机版」Squoosh Desktop App，支持 Windows、Mac 和 Linux 操作系统，采用 Electron 技术可在没有网络联机的情况下使用。

Shrink.media

网站链接：https://www.shrink.media/

Shrink.media 是一个全新的免费图片压缩服务，提供的压缩技术主要是降低相片质量、调整尺寸大小，预设会降低 50% 画质、缩小 75% 相片尺寸，使用者可拖曳进行调整，比较压缩后的相片与原图差异。

Compress JPEG

网站链接：https://compressjpeg.com/

Compress JPEG 是一个免费在线图片压缩工具，单次处理最多 20 张图片，支持图片格式包括 JPG、JPEG、PNG、GIF 和 PDF ，只要将图片拖曳到网站就会自动进行压缩，批处理还能压缩成单一文件下载。可单独调整相片压缩比，比较压缩前后的相片差异。

ImageResizer

网站链接：https://imageresizer.com/

ImageResizer 是整合了常用图片编辑功能的免费在线工具，从 2013 年开始提供用户简易的调整图片大小工具，多年来不断改良工具，加入更多功能、提升处理速度，目前除了调整图片尺寸工具也有批次编辑、图片放大、图片压缩、图片裁切和 PDF 工具。

Optidash

网站链接：https://optidash.ai/

Optidash 使用人工智能（AI）技术的图片优化平台，可在线对用户上传图片进行处理，降低图片容量，加速网页或应用程序使用，也能节省网络流量和储存空间。Optidash 支持 JPEG、PNG、APNG、WebP、SVG 和 GIF 格式，单张图片不能超过 16 MB。

Resizing.app

网站链接：https://resizing.app/

Resizing.app 是一个调整图片尺寸的在线工具，整合常用的三大功能：转档、压缩和重设大小，特色除了免费以外，更重要的是不会将任何用户图片上传到第三方服务器，也就是直接在浏览器端进行相关操作，即使脱机状态下也可使用。

Apowersoft

网站链接：https://www.apowersoft.tw/compress-file-online

在线文件压缩工具来自 Apowersoft，是一个多合一文件压缩工具，提供压缩图片、影片或 PDF 功能，无需注册或安装，支持 Google Chrome、Firefox 等主流浏览器，这个压缩工具的特性是所有功能皆可免费使用，没有压缩次数、文件数或文件大小等限制，也支持所有常见文件格式。

Assetizr

网站链接：https://assetizr.com/

Assetizr 将优化、调整图片大小、重新命名等功能放在单一程序中，方便用户处理图片，支持 JPG、PNG、SVG、GIF 和 WEBP 等常见格式。操作方式很简单，只要将图片拖曳到应用程序就能使用。

Recompressor

网站链接：https://recompressor.com/

Recompressor 是一款免费图片优化工具，将图片拖曳到网页中就能处理，支持 .svg、.jpg 和 .png 三种格式，和其他同类服务不同的是 Recompressor 会自动进行多种压缩，产生不同图文件大小、压缩比和画质对比图，提供使用者最佳的压缩结果建议。

Picdiet

网站链接：https://www.picdiet.com/zh-tw

Picdiet 透过独特的 JavaScript 算法快速压缩 80% 图片大小，而且能够无损图片画质，Picdiet 号称不用任何后端服务器或 API，仅透过浏览器压缩图片，这代表压缩速度快，不会导致隐私或敏感图片外泄，在压缩效果方面也比现有的压缩软件更为理想。

YouCompress

网站链接：https://www.youcompress.com/

YouCompress 可以在浏览器里直接压缩各种类型文件，包括常见的 MP4、MOV、MP3、PDF、PNG、JPG、JPEG、GIF，几乎包办图片、文件、影片和音频格式，文件在压缩处理后的几小时会自动从服务器移除，不过你也可以手动删除。

Pngyu

网站链接：https://nukesaq88.github.io/Pngyu/

Pngyu 使用 pngquant 作为图片压缩引擎，以有损压缩方式运作（就是稍微牺牲一些画质，但可大幅降低图片容量），转换后可以明显减少图片大小（通常会高达 70%），并保留原有的透明度，产生的图片可以和所有浏览器及操作系统完全兼容。

Imageoptim

网站链接：https://imageoptim.com/mac

ImageOptim 是一款很轻巧、简单易用、开放原始码的相片压缩、优化工具，只要把图片拖放到 ImageOptim 就会进行自动化处理，支持 PNG、JPEG 和 GIF 三种常见的图片格式，背后使用多种图片处理技术。

ShortPixel

网站链接：https://free.com.tw/go/shortpixel

ShortPixel 是一个 WordPress 外挂服务，主要功能是在线将网站图片压缩、优化处理，包含失真与不失真的可用压缩方式，最高可压缩达 90% 大小！若不是使用 WordPress 架站，一样能透过 ShortPixel 在线图片压缩工具来对图片压缩及优化，网站本身有提供在线工具，而且完全免费，在压缩时可选择是否保留 EXIF 信息、将 CMYK 颜色转为 RGB 或重设图片大小。

Imagify

网站链接：https://imagify.io/optimizer/

Imagify 和知名的 WordPress 快取外挂「WP Rocket」来自相同开发团队，严格来说它并不是一款免费服务，Imagify 是一个 WordPress 插件，可在用户上传图片时，利用远程服务器来进行图片压缩优化，是你想获得更小尺寸图片又不损失画质的好选择。顺带一提，它也有提供免费的在线压缩工具，不过有单个文件最大 2 MB 限制，而且压缩后的图片只会保存 24 小时。

iLoveIMG

网站链接：https://www.iloveimg.com/zh-tw

iLoveIMG 是一款免费使用、无须注册的在线工具，主要以编辑图片为主，提供一些用户可能较常会用到的工具包括：图片压缩、调整图片尺寸、裁剪图片及图片转文件。此外，iLoveIMG 也允许手动删除图片，这对于顾虑到隐私问题的使用者来说是个很好的设计，如果刚好需要处理图片的话不妨打开网站试试看。

Jpeg.io

网站链接：https://www.jpeg.io/

Jpeg.io 是知名网页优化、整合图片压缩服务 Kraken.io 推出的在线图片转文件压缩服务，支持多种常见常用图片格式，只要将图片拖曳到网站里，即可快速转换为优化的 JPEG 图片。虽然 Jpeg.io 网站里没有说明何为优化的图片，但应该是图片尺寸更小、分辨率和画质不变的无损压缩，支持以云端硬盘汇入大量文件，进行批处理。

PP鸭

网站链接：https://ppduck.com/

PP鸭图片压缩工具，支持 JPG、PNG 和 GIF 三种常见格式，利用该软件的算法，自动完成图片压缩任务，且在保证图片质量下有效降低图片大小。这个软件适用于 Windows 及 Mac OSX 两大平台，免费版会有使用限制，付费购买注册码可解除限制。

Compressor.io

网站链接：https://compressor.io/

Compressor.io 能在在线把图文件压缩，直接让你比对源文件跟压缩后的图片间有无任何差异，支援 JPG、PNG、GIF、SVG、WebP 五种常见格式，单个文件最大支持 10 MB，提供无失真和失真（降低质量）两种压缩技术，也能依照需求自行调整相关设定。

Kraken.io

网站链接：https://kraken.io/web-interface

Kraken.io 是一个集合各种网页优化的网络服务，其中有免费在线图片压缩工具（Free Online Image Optimizer）可在没有注册的情况下自由使用，这项服务允许使用者上传不超过 1 MB 大小的图片，选择有损、无损或是专家自定义的压缩模式。

Upscale Pics

网站链接：https://upscalepics.com/

Upscale Pics 透过人工智能 AI 强化图片的在线工具，提供三种主要功能：放大图片分辨率、移除 JPEG 噪点和压缩图片，只要将图片上传、选择要使用的选项后就能透过它远程处理，不用额外下载应用程序。

总结

如果你平常工作会经常遇到图片，而且是需要将它们上传到网络上供其他人浏览（例如网站），先将相片进行压缩、优化处理，就能确保图片有更小的文件大小，让访客以更快的时间加载，有助于让网站保持好的浏览体验，也能减少服务器的容量流量消耗。

若你一样会接触到许多相片，但是更在乎的是相片分辨率、画质，而且日后有可能会需要进行编辑或处理，这时候你不需要这些图片压缩工具，因为它们可能会降低图片画质，或是将图片尺寸变小。

无论如何，这些图片压缩工具都非常简单，大部分透过浏览器就能操作，有少数还不需要连上网络，直接在计算机脱机使用，确保图片不会被上传到远程服务器，使用上更具隐私和安全性。

在线咨询

上一篇：Jmeter 接口请求中替换参数中的换行符
下一篇：CSS outline-color 属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商