JavaScript中的Image對(duì)象提供了一些可用于對(duì)圖像進(jìn)行操作的函數(shù)和屬性。通過(guò)這些方法,我們可以在JavaScript中實(shí)現(xiàn)一些與圖像相關(guān)的操作。
其中最常用的方法是創(chuàng)建一個(gè)Image對(duì)象,并設(shè)置其src屬性來(lái)加載一個(gè)圖像。例如:
var myImage = new Image(); myImage.src = "image.jpg";Image對(duì)象的寬度和高度可以通過(guò)width和height屬性獲取。例如:
var myImage = new Image(); myImage.src = "image.jpg"; var width = myImage.width; var height = myImage.height;Image對(duì)象還提供了一個(gè)onload事件,在圖像加載完成后觸發(fā)。例如,在下面的示例中,當(dāng)圖像加載完成后,我們將把它添加到文檔中:
var myImage = new Image(); myImage.onload = function() { document.body.appendChild(myImage); }; myImage.src = "image.jpg";另一個(gè)有用的函數(shù)是createImageData(),它創(chuàng)建一個(gè)ImageData對(duì)象,該對(duì)象可以用于在畫布上進(jìn)行像素級(jí)操作。例如:
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageData = context.createImageData(100, 100);上面的代碼將創(chuàng)建一個(gè)100 x 100像素的ImageData對(duì)象,并將其存儲(chǔ)在變量imageData中。 另外一個(gè)有用的函數(shù)是toDataURL(),它可以將一個(gè)Image對(duì)象轉(zhuǎn)換成一個(gè)base64編碼的數(shù)據(jù)URI。例如:
var myImage = new Image(); myImage.src = "image.jpg"; var dataURL = myImage.toDataURL();上面的代碼將創(chuàng)建一個(gè)base64編碼的數(shù)據(jù)URI,并將其存儲(chǔ)在變量dataURL中。 除了上述方法之外,Image對(duì)象還提供了其他幾個(gè)有用的函數(shù)和屬性,例如naturalWidth和naturalHeight屬性,可以獲取圖像原始大小的屬性;complete屬性,可以檢查圖像是否已加載完成等。通過(guò)熟練掌握這些方法,我們可以更好地操作圖片,并將其引入到我們的JavaScript應(yīng)用程序中。