chrome 77 更新后图像显示不正确

Question

在我们的网站中，我们可以使用 dropzone 一起上传多张图片。在 chrome 更新 android 之后，压缩后的大尺寸图像显示为黑色图像。但是我们在 ios 或桌面 chrome 中没有这个问题，问题只在 android chrome.
我怀疑这是由原生延迟加载引起的。有没有办法禁用它？

Answer 1

终于在检查了所有的压缩算法后，我发现了问题 Android Chrome 77.

在我们的算法中，从文件加载图像后，我们使用 canvas.getContext('2d').drawImage 将图像绘制到 canvas 中。然后为了调整图片的大小，我们在 canvas 上使用 drawImage() 来获得新的 canvas，听说 chrome 破坏了算法。简短的答案是 canvas.getContext('2d').drawImage 函数可以正确地将图像作为输入，但不能将 canvas 作为输入。

为了解决这个问题，我们首先计算正确的宽度和高度，然后读取具有所需尺寸的图像。

作品：

    var canvas = document.createElement('canvas');
    canvas.width = img.width/2;
    canvas.height = img.height/2;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

并且不起作用：

    var canvas = document.createElement('canvas');
    canvas.getContext('2d').drawImage(img, 0, 0); 
    var newCanvas = document.createElement('canvas');
    newCanvas.width = canvas.width / 2;
    newCanvas.height = canvas.height / 2;
    newCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width/2, canvas.height/2);

最终，Chrome77无法从canvas中抽取canvas。

Answer 2

我们将绘图 canvas 的 GPU 内存泄漏重现到另一个 canvas 中： https://bugs.chromium.org/p/chromium/issues/detail?id=1011812 可能是同样的问题。

chrome 77 更新后图像显示不正确

images are displayed incorrectly after chrome 77 update

javascript

google-chrome

angularjs

dropzone.js