整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
avaScript奇淫技巧：密碼保護的私密圖片
JavaScript奇淫技巧：圖片壓縮、圖片加密
本文將用JavaScript實現兩個頗有技術含量的功能：圖片壓縮、圖片加密。
最終效果：可實現將任意圖片加密、壓縮，并保存到一個獨立的html頁面中，輸入正確的密碼，才能看到原圖。
效果演示：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
技術原理
將圖片讀入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;
sudo npm install gulp@latest -g
sudo npm install --save-dev gulp
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的時候要引用對哦
文對曾經介紹過的「免費圖片壓縮工具」進行整理，制作為列表讓使用者可更快找到需要的服務，在撰寫這篇文章時也測試過所有圖片壓縮工具都能正常運作，我傾向使用免安裝、在線工具，只要打開瀏覽器就能進行相關操作，更為方便快速。
大家也能照著本文章推薦的服務來試試看，若是未來發現任何服務無法使用，那就試著以其他同類型的服務替代吧！
網站鏈接：https://tinypng.com/
曾經有一段時期我經常會使用 TinyPNG 在線圖片壓縮工具，只要將 PNG 圖片拖曳到網站，它會自動遠程對圖片壓縮、優化，將圖片文件大幅縮小，但又不會影響畫質。TinyPNG 單次可上傳最多 20 張圖片，支持 PNG、JPG 和 WebP 格式，每張圖片最大 5 MB，上傳后會自動遠程進行圖片優化，大幅縮小圖片尺寸。
網站鏈接：https://tinyjpg.com/
TinyJPG 和 TinyPNG 來自同一個開發商，早期 TinyPNG 只支持 PNG 格式，后來加入 TinyJPG 網站讓 JPEG 圖片也能使用壓縮功能，不過現在兩者已經整合在一起了，無論是打開哪一個網站都能正常壓縮 WebP、PNG 和 JPEG 三種常見、常用的圖片格式，在不破壞原有圖文件畫質的情況下，可以減少超過 70% 的大小。
網站鏈接：https://squoosh.app/
Squoosh 是來自 Google 的免費在線圖片壓縮工具，整合各種強大的圖片編碼譯碼器，而且不用額外下載、安裝任何軟件就能在瀏覽器進行圖片壓縮。Squoosh 特色是讓用戶深入了解各種圖片壓縮器及選項設定，可自定義性相當高，包括要適應壓縮質量、畫素、重設圖片大小一應俱全。
因為 Squoosh 是一項開放原始碼項目，有開發者將它打造為「脫機版」Squoosh Desktop App，支持 Windows、Mac 和 Linux 操作系統，采用 Electron 技術可在沒有網絡聯機的情況下使用。
網站鏈接：https://www.shrink.media/
Shrink.media 是一個全新的免費圖片壓縮服務，提供的壓縮技術主要是降低相片質量、調整尺寸大小，預設會降低 50% 畫質、縮小 75% 相片尺寸，使用者可拖曳進行調整，比較壓縮后的相片與原圖差異。
網站鏈接：https://compressjpeg.com/
Compress JPEG 是一個免費在線圖片壓縮工具，單次處理最多 20 張圖片，支持圖片格式包括 JPG、JPEG、PNG、GIF 和 PDF ，只要將圖片拖曳到網站就會自動進行壓縮，批處理還能壓縮成單一文件下載。可單獨調整相片壓縮比，比較壓縮前后的相片差異。
網站鏈接：https://imageresizer.com/
ImageResizer 是整合了常用圖片編輯功能的免費在線工具，從 2013 年開始提供用戶簡易的調整圖片大小工具，多年來不斷改良工具，加入更多功能、提升處理速度，目前除了調整圖片尺寸工具也有批次編輯、圖片放大、圖片壓縮、圖片裁切和 PDF 工具。
網站鏈接：https://optidash.ai/
Optidash 使用人工智能（AI）技術的圖片優化平臺，可在線對用戶上傳圖片進行處理，降低圖片容量，加速網頁或應用程序使用，也能節省網絡流量和儲存空間。Optidash 支持 JPEG、PNG、APNG、WebP、SVG 和 GIF 格式，單張圖片不能超過 16 MB。
網站鏈接：https://resizing.app/
Resizing.app 是一個調整圖片尺寸的在線工具，整合常用的三大功能：轉檔、壓縮和重設大小，特色除了免費以外，更重要的是不會將任何用戶圖片上傳到第三方服務器，也就是直接在瀏覽器端進行相關操作，即使脫機狀態下也可使用。
網站鏈接：https://www.apowersoft.tw/compress-file-online
在線文件壓縮工具來自 Apowersoft，是一個多合一文件壓縮工具，提供壓縮圖片、影片或 PDF 功能，無需注冊或安裝，支持 Google Chrome、Firefox 等主流瀏覽器，這個壓縮工具的特性是所有功能皆可免費使用，沒有壓縮次數、文件數或文件大小等限制，也支持所有常見文件格式。
網站鏈接：https://assetizr.com/
Assetizr 將優化、調整圖片大小、重新命名等功能放在單一程序中，方便用戶處理圖片，支持 JPG、PNG、SVG、GIF 和 WEBP 等常見格式。操作方式很簡單，只要將圖片拖曳到應用程序就能使用。
網站鏈接：https://recompressor.com/
Recompressor 是一款免費圖片優化工具，將圖片拖曳到網頁中就能處理，支持 .svg、.jpg 和 .png 三種格式，和其他同類服務不同的是 Recompressor 會自動進行多種壓縮，產生不同圖文件大小、壓縮比和畫質對比圖，提供使用者最佳的壓縮結果建議。
網站鏈接：https://www.picdiet.com/zh-tw
Picdiet 透過獨特的 JavaScript 算法快速壓縮 80% 圖片大小，而且能夠無損圖片畫質，Picdiet 號稱不用任何后端服務器或 API，僅透過瀏覽器壓縮圖片，這代表壓縮速度快，不會導致隱私或敏感圖片外泄，在壓縮效果方面也比現有的壓縮軟件更為理想。
網站鏈接：https://www.youcompress.com/
YouCompress 可以在瀏覽器里直接壓縮各種類型文件，包括常見的 MP4、MOV、MP3、PDF、PNG、JPG、JPEG、GIF，幾乎包辦圖片、文件、影片和音頻格式，文件在壓縮處理后的幾小時會自動從服務器移除，不過你也可以手動刪除。
網站鏈接：https://nukesaq88.github.io/Pngyu/
Pngyu 使用 pngquant 作為圖片壓縮引擎，以有損壓縮方式運作（就是稍微犧牲一些畫質，但可大幅降低圖片容量），轉換后可以明顯減少圖片大小（通常會高達 70%），并保留原有的透明度，產生的圖片可以和所有瀏覽器及操作系統完全兼容。
網站鏈接：https://imageoptim.com/mac
ImageOptim 是一款很輕巧、簡單易用、開放原始碼的相片壓縮、優化工具，只要把圖片拖放到 ImageOptim 就會進行自動化處理，支持 PNG、JPEG 和 GIF 三種常見的圖片格式，背后使用多種圖片處理技術。
網站鏈接：https://free.com.tw/go/shortpixel
ShortPixel 是一個 WordPress 外掛服務，主要功能是在線將網站圖片壓縮、優化處理，包含失真與不失真的可用壓縮方式，最高可壓縮達 90% 大小！若不是使用 WordPress 架站，一樣能透過 ShortPixel 在線圖片壓縮工具來對圖片壓縮及優化，網站本身有提供在線工具，而且完全免費，在壓縮時可選擇是否保留 EXIF 信息、將 CMYK 顏色轉為 RGB 或重設圖片大小。
網站鏈接：https://imagify.io/optimizer/
Imagify 和知名的 WordPress 快取外掛「WP Rocket」來自相同開發團隊，嚴格來說它并不是一款免費服務，Imagify 是一個 WordPress 插件，可在用戶上傳圖片時，利用遠程服務器來進行圖片壓縮優化，是你想獲得更小尺寸圖片又不損失畫質的好選擇。順帶一提，它也有提供免費的在線壓縮工具，不過有單個文件最大 2 MB 限制，而且壓縮后的圖片只會保存 24 小時。
網站鏈接：https://www.iloveimg.com/zh-tw
iLoveIMG 是一款免費使用、無須注冊的在線工具，主要以編輯圖片為主，提供一些用戶可能較常會用到的工具包括：圖片壓縮、調整圖片尺寸、裁剪圖片及圖片轉文件。此外，iLoveIMG 也允許手動刪除圖片，這對于顧慮到隱私問題的使用者來說是個很好的設計，如果剛好需要處理圖片的話不妨打開網站試試看。
網站鏈接：https://www.jpeg.io/
Jpeg.io 是知名網頁優化、整合圖片壓縮服務 Kraken.io 推出的在線圖片轉文件壓縮服務，支持多種常見常用圖片格式，只要將圖片拖曳到網站里，即可快速轉換為優化的 JPEG 圖片。雖然 Jpeg.io 網站里沒有說明何為優化的圖片，但應該是圖片尺寸更小、分辨率和畫質不變的無損壓縮，支持以云端硬盤匯入大量文件，進行批處理。
網站鏈接：https://ppduck.com/
PP鴨圖片壓縮工具，支持 JPG、PNG 和 GIF 三種常見格式，利用該軟件的算法，自動完成圖片壓縮任務，且在保證圖片質量下有效降低圖片大小。這個軟件適用于 Windows 及 Mac OSX 兩大平臺，免費版會有使用限制，付費購買注冊碼可解除限制。
網站鏈接：https://compressor.io/
Compressor.io 能在在線把圖文件壓縮，直接讓你比對源文件跟壓縮后的圖片間有無任何差異，支援 JPG、PNG、GIF、SVG、WebP 五種常見格式，單個文件最大支持 10 MB，提供無失真和失真（降低質量）兩種壓縮技術，也能依照需求自行調整相關設定。
網站鏈接：https://kraken.io/web-interface
Kraken.io 是一個集合各種網頁優化的網絡服務，其中有免費在線圖片壓縮工具（Free Online Image Optimizer）可在沒有注冊的情況下自由使用，這項服務允許使用者上傳不超過 1 MB 大小的圖片，選擇有損、無損或是專家自定義的壓縮模式。
網站鏈接：https://upscalepics.com/
Upscale Pics 透過人工智能 AI 強化圖片的在線工具，提供三種主要功能：放大圖片分辨率、移除 JPEG 噪點和壓縮圖片，只要將圖片上傳、選擇要使用的選項后就能透過它遠程處理，不用額外下載應用程序。
如果你平常工作會經常遇到圖片，而且是需要將它們上傳到網絡上供其他人瀏覽（例如網站），先將相片進行壓縮、優化處理，就能確保圖片有更小的文件大小，讓訪客以更快的時間加載，有助于讓網站保持好的瀏覽體驗，也能減少服務器的容量流量消耗。
若你一樣會接觸到許多相片，但是更在乎的是相片分辨率、畫質，而且日后有可能會需要進行編輯或處理，這時候你不需要這些圖片壓縮工具，因為它們可能會降低圖片畫質，或是將圖片尺寸變小。
無論如何，這些圖片壓縮工具都非常簡單，大部分透過瀏覽器就能操作，有少數還不需要連上網絡，直接在計算機脫機使用，確保圖片不會被上傳到遠程服務器，使用上更具隱私和安全性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
