裁剪縮小圖像

Question

我不完全確定如何描述問題，所以讓我來舉個例子來解釋它。

• 假設我有一個寬度和高度爲600x400的畫布設置。

• 現在，我可以選擇一個圖像（可以是任何尺寸但通常大於600x400）並將其繪製在畫布上。

• 現在我需要裁剪原始圖像（假設在這種情況下是1000x500像素）到 400x200像素。

我該如何解決這個問題，以確保裁剪原始大小的圖像，同時在畫布上顯示縮小圖像？

我最好看一個完全客戶端解決方案。

Answer 1

Live Demo

它其實很容易。您只需將圖像繪製到所需大小的畫布上，然後在其上調用toDataUrl()即可獲取所得圖像數據。將圖像本身繪製到不同的畫布上，只要您將原始圖像的內容繪製到裁剪區域，就不會影響輸出。

var canvas = document.getElementsByTagName("canvas")[0], 
    context = canvas.getContext("2d"), 
    img = document.getElementsByTagName("img")[0]; 

canvas.width = 600; 
canvas.height = 400; 

context.drawImage(img, 0,0,600,400); 

var croppedCanvas = document.getElementById("tempCanvas"), 
    croppedCtx = croppedCanvas.getContext("2d"); 

croppedCanvas.width = 400; 
croppedCanvas.height = 200; 

croppedCtx.drawImage(img, 0, 0);