我想在画布上从jpg文件中绘制图像。 我的代码:
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'img/my_image.jpg';
问题是画布上的图像比文件中的图像大得多。为什么?如何绘制实际尺寸的图像?
更新: 结果:http://jsfiddle.net/AJK2t/
答案 0 :(得分:34)
这是你的问题:
<canvas style="width: 700px; height: 400px;" id="konf"></canvas>
您要设置画布的可视尺寸,而不是像素数。因此,浏览器正在缩放画布像素。
最简单的解决方法是:
<canvas width="700" height="400" id="konf"></canvas>
width
和height
参数控制画布中的像素数。没有CSS样式,画布的默认视觉大小也将是这个大小,导致每个屏幕像素一个画布像素(假设您没有缩放Web浏览器)。
从my answer to a related question复制/粘贴:
如果您的JPG 32x32(它的总像素正好是1024),请考虑一下会发生什么情况,但是通过CSS指定它应该显示为 {{1} }。同样适用于HTML Canvas:
canvas元素的
width:800px; height:16px
和width
属性决定了您可以绘制的像素数。如果未指定canvas元素的高度和宽度,则per the specs:
“width属性默认为300,height属性默认为150。”
height
和width
CSS属性控制元素在屏幕上显示的大小。如果未设置CSS尺寸,则元素的固有尺寸将用于布局。如果在CSS中指定的尺寸与画布的实际尺寸不同,则必须根据需要对浏览器进行拉伸和压缩以进行显示。您可以在此处查看此示例:http://jsfiddle.net/9bheb/5/
答案 1 :(得分:2)
工作示例:http://jsfiddle.net/jzF5R/
为了缩放图像,您需要提供您想要的缩放宽度和高度ctx.drawImage()
:
// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);
保持原始图像尺寸:
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
让画布不会溢出页面:
ctx.canvas.width = document.body.clientWidth;
您可以轻松地将图像宽度和高度缩放到原始图像的70%:
ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);
答案 2 :(得分:0)
要在画布上显示MJPEG流(或其他内容)而不在HTML中定义画布的宽度和高度,因此只使用CSS来获取响应画布并使其适合页面,我使用:
//get size from CSS
var sizeWidth = context.canvas.clientWidth;
var sizeHeight = context.canvas.clientHeight;
//here the solution, it replaces HTML width="" height=""
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);
无论画布的大小如何,画面都完全包含在画布中(高度和宽度之间的比率没有保持,但无关紧要,css中的height:auto;
可以解决这个问题。)
Etvoilà!