我需要在前端讀取用戶提交的 PNG 的每個像素的透明度值。
現在我正在阻止表單提交，并將檔案輸入中的 PNG 轉換為 FileReader 物件。現在我在想我可以簡單地從該資料中讀取透明度值。例如，我轉換為 ArrayBuffer，然后轉換為 Uint8Array，這是一個大型整數陣列，其值范圍為 0-255，但它看起來不像正確的顏色。
然后我讀到你必須在 HTML5 畫布上實際顯示 PNG 才能做到這一點。
uj5u.com熱心網友回復：
png 緩沖區不以可讀的方式保存像素資料，它被壓縮了，所以你不能像你想要的那樣讀取它。您必須以某種方式獲取像素，最簡單直接的方法是使用createImageBitmap(file)將其轉換為位圖，然后使用OffscreenCanvas繪制位圖并使用讀取它getImageData
這樣您可以讀取的不僅僅是 pngs.. . 并且還在作業執行緒中使用它
// simulate getting a file you would get from eg file input (1x1 pixel)
fetch('data:;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
.then(r => r.blob())
.then(createImageBitmap)
.then(readData)
/** @param {ImageBitmap} bitmap */
function readData (bitmap) {
const { width: w, height: h } = bitmap
const canvas = new OffscreenCanvas(w, h)
const ctx = canvas.getContext('2d')
ctx.drawImage(bitmap, 0, 0)
const pixels = ctx.getImageData(0, 0, w, h).data
// read alpha channel
for (let i = 0; i < pixels.length; i = 4) {
console.log(pixels[i 3])
}
}uj5u.com熱心網友回復：
PNG 不包含原始影像資料，而是經過壓縮的。為了對其進行解碼，您需要進行一些復雜的計算。將其加載到 a 中<canvas>并讓瀏覽器進行解碼：
<canvas id="myCanvas"></canvas>
<input type="file" accept="image/png, image/gif, image/jpeg" id="myFileInput" />
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext("2d");
const fileInput = document.getElementById('myFileInput');
fileInput.onchange = function(changeEvent) {
const files = changeEvent.target.files;
const file = files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(loadEvent){
const image = new Image();
image.src = loadEvent.target.result;
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
const imageData = context.getImageData(0, 0, image.width, image.height);
console.log(imageData)
// see https://stackoverflow.com/a/667074/17870699
}
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408392.html
標籤：
下一篇：使用DOM事件使文本變為粗體