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

Question

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

标签： javascriptangularjsgoogle-chromedropzone.js

Answer 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 无法从画布绘制画布。