將畫布輸出圖像調整爲特定尺寸（寬度/高度）

Question

我有一個大畫布（5000x5000），我想拍一張照片並在客戶端創建一個縮略圖。我可以使用canvas.toDataURL來拍攝圖像，但是如何重新調整大小？我是否必須創建一個新的$("<canvas></canvas>")元素，然後將該圖像放入並運行canvas2.toDataURL();任何人都可以幫助我解決這個問題嗎？我無法理解它如何去做。

var canvas = document.getElementById("main"); 
var ctx = canvas.getContext("2d"); 
var tumbnail64 = null; 
var image = new Image(); 
image.src = canvas.toDataURL(); 
image.onload = function() { 

    $c2 = $("<canvas></canvas>"); 
    $c2[0].width=100; 
    $c2[0].height=100; 
    $c2[0].getContext("2d"); 
    $c2[0].drawImage(image, 0, 0,100,100); 
    tumbnail64 = $c2[0].toDataURL(); 
}; 

Answer 1

像這樣的事情應該工作，因爲你沒有原來的canvas元素安全限制：

var resizedCanvas = document.createElement("canvas"); 
var resizedContext = resizedCanvas.getContext("2d"); 

resizedCanvas.height = "100"; 
resizedCanvas.width = "200"; 

var canvas = document.getElementById("original-canvas"); 
var context = canvas.getContext("2d"); 

resizedContext.drawImage(canvas, 0, 0, 200, 100); 
var myResizedData = resizedCanvas.toDataURL();