在画布上绘制大于实际尺寸的图像

Question

我想在画布上绘制一张来自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/

- latata

Answer 1

这是你的问题：

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

你正在设置画布的“视觉尺寸”，但没有设置像素数量。因此，浏览器会放大画布像素。

最简单的修复方法是：

<canvas width="700" height="400" id="konf"></canvas>

width和height参数控制画布中像素的数量。在没有CSS样式的情况下，画布的默认视觉大小也将是这个大小，每个屏幕像素对应一个画布像素（假设您没有缩放Web浏览器）。

从我对相关问题的回答复制/粘贴：

请思考一下，如果您有一个JPG图片，它的大小确实是32x32（总共有1024个像素），但是通过CSS指定它应该显示为width:800px; height:16px。同样的事情也适用于HTML画布：

• 画布元素本身的width和height属性决定了您可以绘制多少像素。如果您没有指定画布元素的高度和宽度，则 根据规范：
  "width属性默认为300，height属性默认为150。"

• width和height CSS属性控制元素在屏幕上显示的大小。如果未设置CSS尺寸，则使用元素的固有大小进行布局。

如果您在CSS中指定与画布实际尺寸不同的尺寸，则必须由浏览器拉伸和压缩以适合显示。您可以在这里看到一个例子：http://jsfiddle.net/9bheb/5/

- Phrogz

Answer 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);

- Alex W

---

如果你正在进行缩放操作，那么你可能希望按照图像的宽度/高度比例进行缩放，这样就不会压缩图像 ;) - markE

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); 对我来说不起作用。请检查：http://jsfiddle.net/AJK2t/ - latata

@Alex W：我确信你知道...只是想让提问者也知道 :) - markE

你的建议会减小图像的比例，但这样做 OP 会失去像素。正确答案是被接受的。 - cherouvim

我不确定为什么，但每当我尝试这样做时，画布图像的文件大小都比原始图像要大..无论我尝试什么方法..唯一的方法就是让它比原始图像更小..但这会丢失很多细节，效果非常糟糕.. - carinlynchin

Answer 3

如果要在画布（或其他地方）上显示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; 可以解决这个问题）。

Et voilà！

- flgk