當我在網上見到upng.js這個項目時,就萌生了想做一個apng生成頁面的想法。
前端高手張鑫旭也做了個apng生成頁面,但是:
- 他並沒有告訴我們他做的步驟,只說了他用兩個晚上做成的。(經寡人核查,他也是拿upng.js来做的)
- 無法調整順序,只能刪除後再重新上傳。(難道是我用linux的關係?)
- 預設時間是42ms,閃瞎我的狗眼。
- 不能對單張png縮減體積。
由於有以上幾個缺點,我決定自己做一個apng生成頁面。
首先準備材料,只需要去github下載兩個文件:UPNG.js,pako.js。
以下為走通流程步驟:
1.新建一個空html文檔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
2.導入upng.js跟pako.js。
<script src="UPNG.js-master/UPNG.js"></script> <script src="UPNG.js-master/pako.min.js"></script>
3.上傳文件
<input type="file" class="ejimageupload" multiple> <script> document.querySelector(".ejimageupload").addEventListener("change", function(e) { console.log('(e.target.files[0])', e.target.files[0]); } </script>
4.讀取上傳的文件
// 2. get file var img_handle = e.target.files[0]; // 3. get base64 var reader = new FileReader(); reader.readAsDataURL(img_handle); reader.onload = function () { console.log('(reader.result)', reader.result); }
5.拿到圖片長寬,順帶預覽圖片
<img src="" class="ejimg" id="ejimg1"> document.querySelector("#ejimg1").src = reader.result; document.querySelector("#ejimg1").onload = function () { this.style.display = 'block'; ejwidth = this.naturalWidth; ejheight = this.naturalHeight;
6.把圖片轉換為canvas對像
// 5. push canvas data var canvas = document.createElement('canvas'); canvas.width = ejwidth; canvas.height = ejheight; var context = canvas.getContext('2d'); context.drawImage(this, 0, 0, ejwidth, ejheight); ejdata.push(context.getImageData(0, 0, ejwidth, ejheight).data);
7.用upng.js生成apng
// upng click document.querySelector(".ejupng").addEventListener("click", function(e) { console.log('ejdata', ejdata); var png = UPNG.encode([ejdata[0].buffer, ejdata[1].buffer], ejwidth, ejheight, 0, [3600, 3600]); document.querySelector('.ejimg_result').src = URL.createObjectURL(new Blob([png])); document.querySelector('.ejimg_result').style.display = "block"; });
以上的步驟走通,用了我不少時間,所以張鑫旭說他用兩個晚上完成,我是挺欽佩他的工作效率的。
以上只是確認了功能可以實現,接下来才是真正開始…
Pages: 1 2