1

我在使用 drawImage 方法将大于 250PX 宽度和高度的预加载图像放置到画布上时遇到了一些问题。

//Canvas

var canvas = document.createElement("canvas");
var contex = canvas_image.getContext('2d');
canvas.width = 350;
canvas.height = 350;
canvas.id = 'canvas'
$('.canvas').append(canvas);

//Draw Image to canvas

var imageObj = new Image();
imageObj.onload = new function() {
    contex.drawImage(imageObj, 0, 0);
};
imageObj.src = $('img').attr('src');

我似乎无法让它处理大于 250PX 宽度或高度的图像。但是图像显示在 250 以下...这真的很奇怪和令人沮丧。

4

1 回答 1

2

您必须从画布元素中获取上下文。您在帖子中显示的代码（不确定是否是发布问题时发生的拼写错误？尽管如果不是拼写错误，您应该无法绘制任何内容:-)）具有以下错误：

这一行：

var contex = canvas_image.getContext('2d');

应该：

var contex = canvas.getContext('2d');

因为canvas_image似乎不存在。

如果您已经加载了图像，则可以直接将其绘制到画布上 - 无需再次加载图像：

contex.drawImage($('img')[0], 0, 0);

只需确保像处理屏幕外图像一样首先点击它的加载事件。

var img = $('img');

img.on('load', function(e) {
    contex.drawImage(img[0], 0, 0);
}

window或在'sload事件上调用它。

其他需要注意的是图像是否在左上角的 350x350 像素区域中确实有数据（以防图像非常大）。您可以通过将其缩放来测试以查看是否有信息：

contex.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
于 2013-09-25T03:33:43.403 回答