javascript - 无法绘制大于 250px 正方形的图像

Question

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

//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');

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

Answer 1

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

这一行:

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

应该是:

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

因为 canvas_image 似乎不存在。

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

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

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

var img = $('img');

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

或在 window 的 load 事件上调用它。

其他需要注意的是，如果图像在左上角的 350x350 像素区域中确实有数据(以防图像非常大)。你可以通过按比例绘制它来测试，看看那里是否有信息:

contex.drawImage(imageObj, 0, 0, canvas.width, canvas.height);