canvas - 如何将从画布生成的 300 x 150 的图像调整为 640 像素 X 480 像素的大小

Question

如何将从画布生成的 300 x 150 的图像调整为 640 x 480 像素的大小，然后以 64 为基数发送新的 640 x 480 图像。

因为他已经完成了，但我丢失了图像，因为它出现在黑色背景上。

请帮忙！

这是我的 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 

}