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

【问题标题】：images are displayed incorrectly after chrome 77 updatechrome 77 更新后图像显示不正确
【发布时间】：2020-01-25 10:20:58
【问题描述】：

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

【问题讨论】：

这种情况是否发生在其他浏览器以及 Android 或 Chrome 中？
在 Microsoft Edge 中正常工作，在opera mini 中与 chrome 有相同的问题。而且 Firefox 似乎与 dropzone 不兼容。
我发现问题在于使用“画布”进行图像压缩
您可以写一个答案，将其作为已解决的问题，并作为其他有此问题的人的参考！ :)

标签： javascript angularjs google-chrome dropzone.js

【解决方案1】：

最后在检查了所有的压缩算法后，我在 Android Chrome 77 中发现了问题。

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

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

作品：

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

归根结底，Chrome 77 无法从画布绘制画布。

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回答@Andrey。这是内存泄漏，问题就在那里。我从以前的画布中取出一个句柄并将其设置为 null。