Javascript 绘制图像并调整大小到画布_Javascript_Html5 Canvas

Javascript 绘制图像并调整大小到画布

javascript html5-canvas

Javascript 绘制图像并调整大小到画布,javascript,html5-canvas,Javascript,Html5 Canvas,我有一张1836 x 3264的图像，我想drawImage（）到画布并调整大小到739 x 1162 阅读文档后，我认为可以通过以下方法实现： ctx.drawImage(image, 0, 0, 739, 1162); 我也尝试过： ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162); 两者都只显示完整图像的一小部分，而不是缩小它如何传递值以从1836 x 3264->739 x 1162调整大小？您所拥有的看起来是正确的，因

我有一张1836 x 3264的图像，我想

drawImage（）

到画布并调整大小到739 x 1162

阅读文档后，我认为可以通过以下方法实现：

ctx.drawImage(image, 0, 0, 739, 1162);

我也尝试过：

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

两者都只显示完整图像的一小部分，而不是缩小它

如何传递值以从1836 x 3264->739 x 1162调整大小？

您所拥有的看起来是正确的，因此您可能会在某个地方再次检查输入错误

[补充思考：您的图像真的是1836x326而不是3264x1836吗。]

下面是工作代码和一把小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
img=新图像（）；
img.onload=函数（）{
画布宽度=400；
帆布。高度=300；
ctx.图纸图像（img，0,0，img.宽度，img.高度，0,040300）；
}
img.src=”http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg";
}); // end$（函数（）{}）；

这应该会有帮助：谢谢，代码是对的。这只是移动电话系统处理画布的一个小故障。@PhilipKirkbride你能告诉我们这个移动电话小故障是什么以及你是如何解决的吗？这个回答帮助我意识到我设置的是

canvas.style.width

和

height

而不是

canvas.width

。更改该选项有助于

ctx.drawImage

按预期缩放渲染，而不是在画布本身具有维度属性之前进行拉伸。@crowjonah，你的评论今天为我节省了很多时间！。非常感谢。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    img=new Image();
    img.onload=function(){
        canvas.width=400;
        canvas.height=300;
        ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300);
    }
    img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg";

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>