Question

我使用JS脚本来获取图像并将其绘制到画布上。该代码在除Chrome之外的所有浏览器中都能正常运行。我已经包含了相关的

    this.tile = document.createElement('canvas');
    var ctx = this.tile.getContext("2d");

    this.tile.width = ((size.cm_size) * (((this.image.width) / this.app.dpi.active) * 2.54)).toFixed(2);
    this.tile.height = ((size.cm_size) * (((this.image.height) / this.app.dpi.active) * 2.54)).toFixed(2);

    if (this.scale > 0) {
        // These 2 lines break it in Chrome.
        this.tile.width = this.tile.width * this.scale;
        this.tile.height = this.tile.height * this.scale;
    }

    ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.image.width, this.image.height);

我评论了破坏Chrome内容的两条线。删除这些行使事情有效。

有了这些线条，在我增加＆＃39; this.app.dpi.active＆＃39;之前不会显示任何内容。变量为350（从150开始）。一旦发生这种情况，就会显示它在Firefox中的作用。

没有错误消息，磁贴只是空的。

这是＆＃39; this.app.dpi.active＆＃39;的值列表。以及生成的瓷砖宽度和高度。在DPI值达到350之前，图块不会显示。

150 DPI = 9444 x 9444
200 DPI = 7084 x 7084
250 DPI = 5668 x 5668
300 DPI = 4720 x 4720
350 DPI = 4048 x 4048

我在Chrome和Firefox中检查了这些版本，但它们完全相同，但在Firefox中可以使用。 this.scale值= 4，当宽度和高度不与this.scale相乘时，它在FF和Chrome中工作正常。

如果您需要更多代码或有任何疑问，请与我们联系。

Answer 1

我认为你不能使用Element构造函数。我一直使用document.createElement('canvas')。在我的FF控制台中，使用Element构造函数会抛出错误。

Answer 2

好的，我自己想出了这个，但谢谢大家的意见！

我注意到，一旦图片达到一定尺寸，Chrome就会正确显示。这让我相信Chrome不允许超过一定大小的画布元素（可能是出于内存/效率的原因）。为了解决这个问题，我稍微重新设计了我的系统，以便画布元素永远不会太大，因此总能正确显示。这解决了Chrome中的问题，使我的系统更加快捷。

除Chrome之外，Canvas在所有浏览器中都能正常工作

2 个答案: