🎸【直播】我也要做apng生成頁面

by

當我在網上見到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

Leave a Comment