javascript 在画布上绘制图像 - 比实际大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15793702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing image on canvas - larger than real
提问by latata
I want to draw an image from jpg file on canvas. My code:
我想从画布上的 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';
The problem is that the image on canvas is much bigger than in file. Why? How can I draw image real size?
问题是画布上的图像比文件中的图像大得多。为什么？如何绘制实际大小的图像？
UPDATE: result: http://jsfiddle.net/AJK2t/
更新：结果：http: //jsfiddle.net/AJK2t/
回答by Phrogz
This is your problem:
这是你的问题：
<canvas style="width: 700px; height: 400px;" id="konf"></canvas>
You are setting the visual sizeof your canvas, but not the number of pixels. Consequently the browser is scaling the canvas pixels up.
您正在设置画布的视觉大小，而不是像素数。因此，浏览器正在放大画布像素。
The simplest fix is:
最简单的修复方法是：
<canvas width="700" height="400" id="konf"></canvas>
The widthand heightparameters control the number of pixels in the canvas. With no CSS styling, the default visual size of the canvas will also be this size, resulting in one canvas pixel per screen pixel (assuming you have not zoomed the web browser).
的width和height参数控制在画布的像素的数量。如果没有 CSS 样式，画布的默认视觉大小也将是这个大小，导致每个屏幕像素一个画布像素（假设您没有缩放 Web 浏览器）。
Copy/pasting from my answer to a related question:
从我对相关问题的回答中复制/粘贴：
Think about what happens if you have a JPG that is32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appearas
width:800px; height:16px. The same thing applies to HTML Canvas:
The
widthandheightattributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
"the width attribute defaults to 300, and the height attribute defaults to 150."The
widthandheightCSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/
想想，如果你有一个JPG会发生什么是32×32（它具有完全相同总共1024个像素），但通过CSS，它应该指定出现的
width:800px; height:16px。同样的事情也适用于 HTML Canvas：
canvas 元素本身的
width和height属性决定了您可以绘制多少像素。如果您不指定画布元素的高度和宽度，则根据规范：
“宽度属性默认为 300，高度属性默认为 150。”的
width和heightCSS属性控制尺寸屏幕上的元件的显示器。如果未设置 CSS 尺寸，则使用元素的固有尺寸进行布局。如果您在 CSS 中指定了与画布实际尺寸不同的尺寸，则浏览器必须根据需要对其进行拉伸和挤压以进行显示。你可以在这里看到一个例子：http: //jsfiddle.net/9bheb/5/
回答by Alex W
Working Example: http://jsfiddle.net/jzF5R/
工作示例：http: //jsfiddle.net/jzF5R/
In order to scale an image you need to provide the scaled width and height you want to ctx.drawImage():
为了缩放图像，您需要提供您想要的缩放宽度和高度ctx.drawImage()：
// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);
Maintain original image size:
保持原始图像大小：
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
Keep canvas from overflowing off the page:
防止画布溢出页面：
ctx.canvas.width = document.body.clientWidth;
You can easily scale the image width and height to 70% of original:
您可以轻松地将图像宽度和高度缩放到原始图像的 70%：
ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);
回答by flgk
To display a MJPEG stream on a canvas (or something else) without define the width and the height of the canvas in HTML, so only using CSS to get a responsive canvas and fit with the page, I use that:
要在画布（或其他东西）上显示 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);
The picture is entirely contained in the canvas whatever the size of the canvas (the rate between height and width is not kept but it doesn't matter, an height:auto;in css can fix that).
无论画布的大小如何，图片都完全包含在画布中（不保留高度和宽度之间的比率，但没关系，height:auto;在 css 中可以解决这个问题）。
Et voilà !
等等！
