将图像放置在画布 JS 上答案

【问题标题】：Placing an image on a canvas JS将图像放置在画布 JS 上
【发布时间】：2017-08-23 02:49:48
【问题描述】：

我在html中有以下内容：

<img id="MarkingImage"></img>                
<canvas id="MarkingCanvas"></canvas>

在css:

#MarkingCanvas { width: 100%; background-color: #7986CB; height: 96%; }
#MarkingImage { position: absolute; }

在js:

function LoadImage()
{
   var markingImage = new Image();

   markingImage.addEventListener('load', function() 
   {
       m_imageWidth = this.naturalWidth;
       m_imageHeight = this.naturalHeight;

       m_markingCanvasContext.drawImage(markingImage, 0, 0, m_imageWidth,  m_imageHeight);
   });
   markingImage.src = 'PICT0001.JPG';
}

问题是这个输出拉伸了图像并且它的质量变得非常差（参见附加的“原始”和“结果”）。

当我调试时，我可以看到我的画布的尺寸是：

width - 1410 height - 775

如果我的图片尺寸为：

width - 551 height - 335

所以我的问题是：为什么图像没有按原始大小放置？我的意思是，画布上有足够的空间。另外，为什么图像会被拉伸，结果质量很低。看起来它超出了画布的大小。

我在这里错过了什么？

【问题讨论】：

见this answer。您应该定义画布的高度和宽度属性，而不是使用 css。
好的，有帮助，谢谢！但是尺寸是硬编码的，例如，如果我在笔记本电脑上打开网站，那么画布太大了，我希望自动确定尺寸。这可能吗？
另见imageSmoothingEnabled（及其等价物，mozImageSmoothingEnabled 和 webkitImageSmoothingEnabled）。这有时会影响图像质量，但并非所有浏览器都支持。

标签： javascript html css html5-canvas drawimage

【解决方案1】：

您需要根据浏览器窗口的宽度和高度动态设置画布的宽度和高度。另外，不需要使用图片的naturalWidth / naturalHeight。

var m_markingCanvas = document.getElementById('MarkingCanvas');
var m_markingCanvasContext = m_markingCanvas.getContext('2d');

// setting canvas width and height dynamically
m_markingCanvas.width = window.innerWidth;
m_markingCanvas.height = window.innerHeight;

function LoadImage() {
    var markingImage = new Image();
    markingImage.addEventListener('load', function() {
        m_markingCanvasContext.drawImage(this, 0, 0);
    });
    markingImage.src = 'https://i.stack.imgur.com/a3Wpy.jpg';
}
LoadImage();

&lt;canvas id="MarkingCanvas"&gt;&lt;/canvas&gt;

【讨论】：