Chrome 39的画布渲染问题和硬件加速

时间:2015-01-13 12:19:43

标签: google-chrome html5-canvas hardware-acceleration

我在Chrome 39和屏幕外画布渲染方面遇到了一些问题。当我将6000x4000 JPEG image加载到普通元素中时,它工作正常:

var img = document.getElementById('org');
img.src = "https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-6000x4000.jpg";

图片如下所示:

Normal image

当我通过屏幕外图像加载并将其渲染到画布时,当启用Chrome硬件加速时,它会在很多计算机上崩溃:

var img = document.createElement('img');
img.onload = function() {
    var canvas = document.getElementById('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext('2d')
    context.drawImage(img, 0, 0);
};
img.src = "https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-6000x4000.jpg";

图像失真(见下文)并将图像绘制到画布上需要大约10秒钟(并阻止GUI线程):

Distorted image

当Chrome的硬件加速功能被禁用时,一切正常。有人知道如何解决这个问题吗?我可以从Javascript禁用Chrome的硬件加速,还是您知道其他解决方案?

可以在http://jsfiddle.net/ramondeklein/k0wtaq9m/1/上找到演示此问题的完整小提琴。

0 个答案:

没有答案