HTML柔性畫布比例尺

Question

我正在製作一個網站，它將在畫布上加載一些藍圖圖像。

但圖像的高度和寬度有所不同.i要使畫布縮放等於上傳的圖像比例。我如何編碼，以使畫布的寬度和高度分別對應於上傳的圖片。 這在html5中完成

Answer 1

如果我正確理解你，你想要加載各種尺寸的圖像。根據維度，設置畫布的寬度/高度並繪製圖像？

在這種情況下，您可以添加一個eventListener到圖像。一旦它被加載，獲得寬度和高度。使用這些設置畫布的尺寸。之後，在畫布上繪製圖像。

var image = new Image(); 
 

 
image.addEventListener('load', function(e) { 
 
    var width = image.width; 
 
    var height = image.height; 
 

 
    var canvas = document.querySelector('canvas'); 
 
    canvas.width = width; 
 
    canvas.height = height; 
 

 
    canvas.getContext('2d').drawImage(image, 0, 0, width, height); 
 
}); 
 

 
image.src = 'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png';

<canvas></canvas>

Fiddle

Answer 2

var canvas = document.getElementById('myCanvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var imageObj = new Image(); 
 
imageObj.src = 'images/e1.jpg'; 
 

 

 
canvas.width = imageObj.naturalWidth; 
 
canvas.height = imageObj.naturalHeight;

這也適用