HTML 灵活的画布比例答案

【问题标题】：HTML flexible canvas scaleHTML 灵活的画布比例
【发布时间】：2016-05-31 16:48:34
【问题描述】：

我正在制作一个网站，它将在画布上加载一些蓝图图像。

但图像的高度和宽度各不相同。我想让画布缩放等于上传的图像缩放。我如何编码以使画布的宽度和高度可以根据上传的图像改变。这是在 html5 中完成的

【问题讨论】：

我得到了它的工作 thx :)

标签： javascript html web html5-canvas

【解决方案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';

&lt;canvas&gt;&lt;/canvas&gt;

Fiddle

【讨论】：

【解决方案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;

这也有效

【讨论】：

但是一定要获取图片加载后的宽/高：stackoverflow.com/questions/1645166/…