如何調整從畫布生成的尺寸爲640像素的300 x 150的圖像的大小X 480像素

Question

如何調整從畫布生成的尺寸爲640 x 480像素的300 x 150像的圖像，然後發送新的圖像640 x 480在基地64.

因爲他做了，但我失去了圖像，因爲它出現在黑色的背景。

請幫忙！

這是我的javascript代碼：

var context = document.getElementById(idCanvas); // Canvas with image in 300 x 150 

    var canvasNew = document.getElementById("canvasToResize"); // Canvas to re-draw with new sizes 
    canvasNew.width= 640; 
    canvasNew.height = 480; 

    var context2 = canvasNew.getContext("2d"); 
    var image = document.getElementById("newIMG"); // IMG tag for new image with new sizes 
    image.onload = function() { 
     context2.drawImage(image, 0, 0, 640, 480); 
    }; 

    image.src = context.toDataURL(); 

    return canvasNew.toDataURL().split(',')[1]; // send base 64 

Answer 1

function canvasPreparedToShipping(canvasSource, canvasDestiny) { 

     var canvasS = document.getElementById(canvasSource); // Canvas with image 300 x 150 
     var finalImageResize = ""; 

     var canvasIMG = document.getElementById(canvasDestiny); // Canvas to resize image 
     canvasIMG.width= 640; 
     canvasIMG.height = 480; 

     var context2 = canvasIMG.getContext("2d"); 
     var image = document.getElementById("encodeIMG"); // hidden tag for new image 
     image.onload = function() { 
      context2.drawImage(image, 0, 0, 640, 480); 
      finalImageResize = canvasIMG.toDataURL().split(',')[1]; 
     }; 

     image.src = canvasS.toDataURL(); 

     return finalImageResize; // Image in base64, ready to send the server 

}