Question

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

我在我的电脑上尝试这个非常基本的画布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/

因此无论从那里返回任何高度和宽度坐标，我都将从原始图像裁剪出来并将在画布上绘制。

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

Answer 1

使用以下语法：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

Answer 2

drawImage方法还会使用width和height参数来绘制图像。试试吧：

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

使用图像的大小。

Answer 3

请参阅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();

}

Answer 4

之所以会这样，是因为您的画布具有240x297的大小，而上下文具有150X300的大小。

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

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

Canvas drawimage（）绘制缩放图像

4 个答案: