18

我想从画布上的 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/

4

3 回答 3

43

这是你的问题：

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

您正在设置画布的视觉大小，而不是像素数。因此，浏览器正在放大画布像素。

最简单的解决方法是：

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

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

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

想想如果你有一个 32x32 的 JPG （它有1024 个总像素）但是通过 CSS 指定它应该显示为width:800px; height:16px. 同样的事情也适用于 HTML Canvas：

  • canvas 元素本身的width和height属性决定了您可以绘制多少像素。如果您不指定画布元素的高度和宽度，则按照规范：
    “宽度属性默认为 300，高度属性默认为 150。”

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

如果您在 CSS 中指定与画布的实际尺寸不同的大小，则浏览器必须根据需要对其进行拉伸和挤压以进行显示。你可以在这里看到一个例子：http: //jsfiddle.net/9bheb/5/

于 2013-04-03T18:08:26.183 回答
3

工作示例：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);
于 2013-04-03T17:12:04.047 回答
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);

无论画布的大小如何，图片都完全包含在画布中（不会保留高度和宽度之间的比率，但没关系，一个height:auto;in css 可以解决这个问题）。

等等瞧！

于 2015-04-12T10:06:42.027 回答