调整大小的JavaScript一个图像，而不在DOM

Question

我看到在许多其他这个有趣的线程渲染画布：Resize a Base-64 image in JavaScript without using canvas

然而，当我创建一个使用

const canvas = document.createElement('canvas'); 

结果图像屏幕外的画布是透明的，尺寸甚至不匹配参数。 如果我从DOM一切在画布上绘制工作正常

const canvas = document.getElementById('canvas'); 

这里是我的大小调整功能，保持输入图像比例：

resizeImage(file) { 
    const canvas = document.createElement('canvas'); 
    // const canvas = document.getElementById('canvas'); 
    const context = (<HTMLCanvasElement>canvas).getContext('2d'); 
    // set maximum width and height of output image 
    const maxW = 400; 
    const maxH = 400; 
    const img = new Image; 

    img.onload = function() { 
     const iw = img.width; 
     const ih = img.height; 
     const scale = Math.min((maxW/iw), (maxH/ih)); 
     const iwScaled = iw * scale; 
     const ihScaled = ih * scale; 
     console.log(iwScaled + ' ' + ihScaled); 
     (<HTMLCanvasElement>canvas).width = iwScaled; 
     (<HTMLCanvasElement>canvas).height = ihScaled; 
     context.drawImage(img, 0, 0, iwScaled, ihScaled); 
    } 
    img.src = URL.createObjectURL(file); 
    // retrieve output img in base64 format 
    console.log((<HTMLCanvasElement>canvas).toDataURL()); 
} 

它从一个HTML输入需要一个文件（文件）作为参数。 任何帮助将不胜感激，谢谢。

Answer 1

加载完成后，您会看到Base-64图像。

function resizeImage(file) { 
 
     var canvas = document.createElement('canvas'); 
 
     var context = canvas.getContext('2d'); 
 
     var maxW = 400; 
 
     var maxH = 400; 
 
     var img = document.createElement('img'); 
 

 
     img.onload = function() { 
 
     var iw = img.width; 
 
     var ih = img.height; 
 
     var scale = Math.min((maxW/iw), (maxH/ih)); 
 
     var iwScaled = iw * scale; 
 
     var ihScaled = ih * scale; 
 
     canvas.width = iwScaled; 
 
     canvas.height = ihScaled; 
 
     context.drawImage(img, 0, 0, iwScaled, ihScaled); 
 
     console.log(canvas.toDataURL()); 
 
     document.body.innerHTML+=canvas.toDataURL(); 
 
     } 
 
     img.src = URL.createObjectURL(file); 
 
    } 
 
    document.getElementById("file").addEventListener("change", function() { 
 
     file = file.files[0]; 
 
     if (file) { 
 
     resizeImage(file); 
 
     } 
 
    });

<input id="file" type="file">