Javascript是一門廣泛應(yīng)用于開發(fā)Web應(yīng)用程序的語言，它不僅可以處理各種DOM操作、動(dòng)態(tài)效果等，同時(shí)也可以處理與圖像相關(guān)的操作，比如說將一個(gè)二進(jìn)制圖片轉(zhuǎn)換為實(shí)際的圖像。今天我們來探討一下Javascript如何處理二進(jìn)制圖像。
在Javascript中，可以使用Uint8Array數(shù)組存儲(chǔ)二進(jìn)制數(shù)據(jù)。其中，一個(gè)Uint8Array元素是由8個(gè)二進(jìn)制數(shù)字組成的，稱之為8位二進(jìn)制數(shù)或一個(gè)字節(jié)。通常情況下，一張圖片都是由大量的字節(jié)數(shù)組組成的，那么JavaScript如何處理呢？
我們可以通過創(chuàng)建空的Image對(duì)象，將其src屬性設(shè)置為data URI格式的字符串，來顯示一個(gè)二進(jìn)制圖像。其中data URI格式的字符串包含了圖片的元數(shù)據(jù)和展示和的像素?cái)?shù)據(jù)。下面的例子是將一個(gè)16 x 16像素的藍(lán)色矩形轉(zhuǎn)化為二進(jìn)制數(shù)據(jù)，并以data URI的方式展示它。
const canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
const context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(0, 0, canvas.width, canvas.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let binary = '';
for (let i = 0; i< data.length; i ++) {
binary += String.fromCharCode(data[i]);
}
const src = 'data:image/png;base64,' + window.btoa(binary);
const img = new Image();
img.src = src;
document.body.appendChild(img);