[英]HTML5: canvas and image size
I want to draw an image on canvas using JS. 我想使用JS在画布上绘制图像。 This is my html code:
这是我的html代码:
<canvas style="width:1000px;height:600px;border:1px solid black;" id="canvas"> </canvas>
This is my js code: 这是我的js代码:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0,1000,600)
}
img.src = someUrlToJpgImage;
This is the origin jpg image (1000x600) which is located on server: 这是位于服务器上的原始jpg图片(1000x600):
This is the result (1000x600) I see in browser: 这是我在浏览器中看到的结果(1000x600):
As you see this is scaled the top left corner of the image but not the whole image as expected. 如您所见,这是缩放图像的左上角,而不是按预期缩放整个图像。 I tried to add to js code:
我试图添加到js代码:
ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
but it didn't help. 但这没有帮助。
How to solve this problem? 如何解决这个问题呢?
您应该在canvas元素上设置所需的像素数量:
<canvas style="width:1000px;height:600px;border:1px solid black;" height="600" width="1000" id="canvas"> </canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.