如何将图像绘制到画布上并正确调整它们的大小？答案

【问题标题】：How do I Draw Images to a Canvas and Size Them Properly?如何将图像绘制到画布上并正确调整它们的大小？
【发布时间】：2020-05-08 13:35:36
【问题描述】：

我无法让我的画布绘制 img 大小并且看起来与实际的 img 元素完全相同。每次我尝试给它一个尺寸时，它似乎都会被裁剪。我怎样才能让我在 jQuery 中获得 img 元素的大小，然后在我的画布元素上使用它来制作精确的副本？

这是一些演示代码；

jQuery(document).ready(function($) {
	var img = $('.image');
	var canvas = $('.img_canvas');
	canvas.height( img.height() );
	canvas.width( img.width() );

	var context = canvas[0].getContext('2d');
	context.drawImage(img[0], 0, 0);
});

body{
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img  src="https://alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" class="image">

<canvas class="img_canvas">
our browser does not support the HTML5 Canvas, please consider updating or changing your browser for a better experience.
</canvas>

【问题讨论】：

标签： jquery html html5-canvas

【解决方案1】：

有一些绊线。

jQuery 函数img.width() 和img.height() 将为您提供DOM 内的图像大小，而不是实际的图像文件分辨率。为此，有naturalWidth and naturalHeight。
类似地，jQuery 函数 canvas.height(320) 和 canvas.width(240) 将设置 CSS 宽度和高度，而不是画布分辨率。您想要的是直接设置画布dom元素（不是jQuery节点）的宽度和高度属性。想象一下：您可以拥有一个像素分辨率为 320x240 的画布，但希望它通过 css 实现全屏显示。
drawImage 带有三个参数将始终以其自然分辨率绘制图像。您可以传入更多参数来调整图像大小。

所以实际的“问题”是基于图像的 dom 大小的画布大小。希望对您有所帮助！

jQuery(document).ready(function($) {
	var img = $('.image');

    var canvas = $('.img_canvas');
    canvas[0].height = img[0].naturalHeight;
    canvas[0].width = img[0].naturalWidth;

    var context = canvas[0].getContext('2d');
    context.drawImage(img[0], 0, 0);    	
});

body{
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}
canvas {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
image:
<img  src="https://alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" class="image">
canvas:
<canvas class="img_canvas">
our browser does not support the HTML5 Canvas, please consider updating or changing your browser for a better experience.
</canvas>

【讨论】：

【解决方案2】：

这不是 jQuery，但你应该明白。使用new Image() 创建一个图像，然后在load 事件中调用drawImage 方法，同时从加载的图像为画布设置高度和宽度属性。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            img.image{
                border:2px solid blue
            }
            canvas{
                border:2px solid red;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                let canvas=document.querySelector('canvas');
                let ctxt=canvas.getContext('2d');

                let oImg=new Image();
                    oImg.onload=function(){
                        canvas.width = oImg.width;
                        canvas.height = oImg.height;
                        ctxt.drawImage( oImg, 0, 0, canvas.width, canvas.height );
                    }

                oImg.src=document.querySelector('img.image').src;
            })
        </script>
    </head>
    <body>
        <img class='image' src="https://picsum.photos/seed/picsum/400/300" />
        <canvas>
            This Web-Browser does not support the "HTML5 Canvas", please consider 
            updating or changing your browser for a better experience.
        </canvas>
    </body>
</html>

document.addEventListener('DOMContentLoaded', function(){
  let canvas=document.querySelector('canvas');
  let ctxt=canvas.getContext('2d');

  let oImg=new Image();
    oImg.onload=function(){
      canvas.width = oImg.width;
      canvas.height = oImg.height;
      ctxt.drawImage( oImg, 0, 0, canvas.width, canvas.height );
    }

  oImg.src=document.querySelector('img.image').src;
})

img.image{
  border:2px solid blue
}
canvas{
  border:2px solid red;
}

<img class='image' src="//alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" />
<canvas>
  This Web-Browser does not support the "HTML5 Canvas", please consider 
  updating or changing your browser for a better experience.
</canvas>

【讨论】：