調整大小的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">