HTML5提供了一些強(qiáng)大的圖片處理API，可以幫助開發(fā)者快速、簡單地處理和展示圖像。以下是幾個(gè)常用的圖片處理API的示例：

//加載圖片
var img = new Image();
img.onload = function(){
//畫布上繪制圖片
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
//將圖片轉(zhuǎn)成base64格式
var base64 = canvas.toDataURL();
//在頁面上展示圖片
var imgEl = document.createElement('img');
imgEl.src = base64;
document.body.appendChild(imgEl);
}
img.src = 'example.jpg';

以上代碼將一個(gè)名為example.jpg的圖片轉(zhuǎn)成了base64格式，在頁面上展示了它。另外，HTML5還提供了對圖像進(jìn)行剪裁和縮放的API。

//剪裁圖片
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);
var base64 = canvas.toDataURL();
var imgEl = document.createElement('img');
imgEl.src = base64;
document.body.appendChild(imgEl);
//縮放圖片
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width * 0.5;
canvas.height = img.height * 0.5;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL();
var imgEl = document.createElement('img');
imgEl.src = base64;
document.body.appendChild(imgEl);

以上代碼分別對圖片進(jìn)行了剪裁和縮放操作。剪裁操作將圖片裁剪成了100x100大小的圖像，縮放操作將圖片的大小減半。

除此之外，HTML5還提供了很多其他的圖片處理API，如能夠?qū)崟r(shí)處理圖像的Canvas API和操作視頻的Video API等等，這些API的存在為開發(fā)者帶來了更多展示圖像和處理圖像的可能。