JavaScript是一種強大的編程語言，它可以與HTML和CSS一起被用來創(chuàng)建動態(tài)的網(wǎng)頁。輸出圖片是JavaScript的一個非常有用和實用的特性，允許Web開發(fā)者在網(wǎng)頁中以眼睛可見的方式展示圖像。在本文中，我們將探討JavaScript輸出圖片的方法，并且使用豐富的實例進行說明。
一個簡單的輸出圖片的例子：

<p>
// 創(chuàng)建圖片元素
var img = document.createElement('img');
// 設(shè)置圖片源
img.src = 'example.jpg';
// 添加圖片元素到網(wǎng)頁中
document.body.appendChild(img);
</p>

在上述代碼中，首先創(chuàng)建了一個圖片元素，然后通過設(shè)置img.src屬性來設(shè)置圖像的源。最后，我們通過document.body.appendChild()方法將此圖片添加到網(wǎng)頁的body元素中。當此代碼執(zhí)行時，我們就可以在網(wǎng)頁中看到example.jpg的圖像。
現(xiàn)在我們來看看另一種方法，可以使用ajax和canvas元素來輸出圖片：

<p>
// 創(chuàng)建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設(shè)置響應類型為圖像
xhr.responseType = 'blob';
xhr.onload = function() {
// 創(chuàng)建一個Image對象
var image = new Image();
image.onload = function() {
// 創(chuàng)建一個Canvas元素
var canvas = document.createElement('canvas');
// 設(shè)置Canvas的大小
canvas.width = this.width;
canvas.height = this.height;
// 將圖像繪制到Canvas上
canvas.getContext('2d').drawImage(this, 0, 0);
// 將Canvas轉(zhuǎn)換成Data URL，并將其添加到網(wǎng)頁中
document.body.appendChild(canvas.toDataURL());
}
// 將響應中的數(shù)據(jù)轉(zhuǎn)換成圖像對象
image.src = window.URL.createObjectURL(xhr.response);
};
// 發(fā)送ajax請求
xhr.open('GET', 'example.jpg');
xhr.send();
</p>

在上述代碼中，我們首先創(chuàng)建了一個XMLHttpRequest對象，并且設(shè)置響應類型為'blob'。接著，我們定義了xhr.onload回調(diào)函數(shù)，這個函數(shù)將在ajax請求完成并且圖片被成功取回之后被執(zhí)行。在回調(diào)函數(shù)中，我們創(chuàng)建了一個Image對象，然后通過window.URL.createObjectURL()方法將響應中的數(shù)據(jù)轉(zhuǎn)換成一個圖像對象。接下來，我們創(chuàng)建了一個Canvas元素，并且將圖像對象繪制到Canvas上。最后，我們將Canvas轉(zhuǎn)換成Data URL，并使用document.body.appendChild()方法將其添加到網(wǎng)頁中以供查看。
如果你需要在網(wǎng)頁中顯示一個不同尺寸的圖像，那么可以使用HTML中的img標簽，并設(shè)置其寬度和高度屬性：

<p>
// 創(chuàng)建一個Image對象
var image = new Image();
// 設(shè)置圖片源
image.src = 'example.jpg';
// 設(shè)置圖片寬度和高度
image.width = 200;
image.height = 200;
// 添加圖片元素到網(wǎng)頁中
document.body.appendChild(image);
</p>

在上方的代碼中，我們創(chuàng)建了一個Image對象，并且設(shè)置其尺寸為200x200。接下來，我們設(shè)置圖像的源為example.jpg，并使用document.body.appendChild()方法將其添加到網(wǎng)頁中。
通過上述實例，我們可以看到JavaScript輸出圖片的方法非常方便和實用。無論你是使用簡單的img標簽來展示圖像，還是使用ajax和Canvas來動態(tài)地繪制圖像，JavaScript都可以幫助你輕松地完成這項工作。