Canvas drawimage() 绘制缩放图像答案

【问题标题】：Canvas drawimage() draws zoomed imageCanvas drawimage() 绘制缩放图像
【发布时间】：2016-12-21 10:41:33
【问题描述】：

我有分辨率为 1920 * 1080 的显示器。

我正在我的 PC 上尝试这个非常基本的画布 drawimage() 代码。

<!DOCTYPE html>
<html>
    <body>

        <p>Image to use:</p>

        <img id="scream" width="220" height="277" 
        src="test.jpg" alt="The Scream">

        <p>Canvas:</p>

        <canvas id="myCanvas" width="240" height="297"
        style="border:1px solid #d3d3d3;">
           Your browser does not support the HTML5 canvas tag.
        </canvas>

        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
                var img = document.getElementById("scream");
                ctx.drawImage(img, 10, 10);
           };
        </script>

    </body>
</html>

所以我得到这样的输出：

其实输出应该和原图一样，其实不然。

在通过stackoverflow和http://developer.mozilla.org的类似问题后，我了解到它与高度和宽度有关。

如何在任何屏幕尺寸或设备上正确使用 drawimage()？

编辑：测试图像尺寸为 3024 * 4032

我正在尝试使用以下插件实现裁剪和保存功能：http://odyniec.net/projects/imgareaselect/

所以无论从那里返回什么高度和宽度坐标，我都会从原始图像中裁剪该图像并在画布上绘制。

因此，裁剪后的图像必须具有实际分辨率，但显示在较小的预览容器中。

【问题讨论】：

您的源“要使用的图像”比 img 标签中显示的分辨率要高得多，所以当您尝试在画布中绘制它时，您需要指定您想要的高度和宽度将其调整为

标签： javascript html canvas

【解决方案1】：

这是因为您的画布有 240x297，但上下文有 150X300。

我用这种方式解决了这个问题。

let canvas = document.createElement("myCanvas");
ctx = canvas.getContext("2d");
ctx.canvas.width = 240;
ctx.canvas.height = 297;

【讨论】：

【解决方案2】：

使用此语法：context.drawImage(img,x,y,width,height);，您可以绘制具有设定尺寸的图像。

参数的作用基本上是：

img：要绘制的图像。
x：从哪里开始在 x 轴上绘制图像。
y：从哪里开始在 y 轴上绘制图像。
width：图像在画布上的宽度。
height：图像在画布上的高度。

如果你想在整个画布上绘制图像，你可以使用这个：

window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,0,0,240,297);
}

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://i.vimeocdn.com/portrait/58832_300x300" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

source

【讨论】：

【解决方案3】：

drawImage 方法还有一个 width 和 height 参数，用于绘制图像。像这样尝试：

ctx.drawImage(img, 10, 10, 220, 277);

使用图像的大小。

【讨论】：

【解决方案4】：

见https://jsfiddle.net/dot8hgwd/1/，正在放大它。

function draw_canvas_image() {
var canvas = document.getElementById("image-holder-canvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("myImageToDisplayOnCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

imageObj.onload = function() {

  var imgWidth = imageObj.naturalWidth;
  var screenWidth  = canvas.width;
  var imgHeight = imageObj.naturalHeight;
  var screenHeight = canvas.height;
    var scaleX = screenWidth/imgWidth;
  var scaleY = screenHeight/imgHeight;
  var scale = scaleY;
  if(scaleX < scaleY) scale = scaleX;
    imgHeight = imgHeight*scale;
    imgWidth = imgWidth*scale;          

    let x = y = 0;
  if(imgWidth < screenWidth){
   x = (screenWidth - imgWidth) / 2;
  }else{
    y = (screenHeight - imgHeight) / 2;
  }

console.log('source ->', imageObj.naturalWidth, imageObj.naturalHeight, 'handle ->', imgWidth, imgHeight, "canvas ->", screenWidth, screenHeight);
  context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, x, y, imgWidth, imgHeight);
}
imageObj.src = 'http://7jptuv.com1.z0.glb.clouddn.com/test_cav.png'; // width < height
// imageObj.src = 'http://r1.ykimg.com/050C000059C3103CADC0AE070702536E'; // width > height
}

document.querySelector('#btn').onclick = function(){
console.log(11);
    draw_canvas_image();

}

【讨论】：