javascript - 使用进度条将图像加载到 Canvas 中

Question

我正在尝试使用此函数将图像引导到我的 Canvas 中:

  function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
       // img.onprogress = function (e) {
       //     ProgressPerc = e.loaded / e.total * 100;
       //     alert(ProgressPerc);
      //      $('#ProgressBar').css('width', ProgressPerc + '%');
      //      $("#sp_progressCount").html(ProgressPerc + '%');
     //   }
        img.onload = function () {
            // var canvas = ctx.canvas;
            var hRatio = canvas.width / img.width;
            var vRatio = canvas.height / img.height;
            var ratio = Math.min(hRatio, vRatio);
            var centerShift_x = (canvas.width - img.width * ratio) / 2;
            var centerShift_y = (canvas.height - img.height * ratio) / 2;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            resizeContainer(img.width * ratio, img.height * ratio);

            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width * ratio, img.height * ratio);
           // d = ctx.getImageData(centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
        }
        img.src = event.target.result;

    }
    reader.readAsDataURL(e.target.files[0]);
}

希望工作顺利，但现在我想添加一个进度条，显示加载数据的百分比并基于此链接http://blogs.adobe.com/webplatform/2012/01/13/html5 -图像进度事件/我发现我可以使用这段代码:

 // img.onprogress = function (e) {
       //     ProgressPerc = e.loaded / e.total * 100;
       //     alert(ProgressPerc);
      //      $('#ProgressBar').css('width', ProgressPerc + '%');
      //      $("#sp_progressCount").html(ProgressPerc + '%');
     //   }

但我发现链接中这些功能仅建议稍后添加，而浏览器不支持它。所以我被困在这里......

Answer 1

图像没有进度事件，因此通常您无法显示单个图像的进度。但我看到您正在使用 FileReader..

您需要将进度添加到文件阅读器而不是图像。您拥有的 img.onload 仅用于显示 fileReader 加载的图像。

因此，将您的进度事件处理程序添加到reader。另外，为了避免代码中出现错误，因为进度事件并不总是知道接下来会发生什么，请检查文件长度是否已知。如果大小未知，则显示加载的字节数。

reader.onprogress = function (event) {
    var str, p;
    
    if (event.lengthComputable) {   // does the progress know what's coming
        p = (event.loaded / event.total) * 100;   // get the percent loaded
        str = Math.floor(p) + "%";    // create the text
    } else {
        p = event.loaded / 1024;   // show the kilobytes
        str = Math.floor(p) + "k"; // the text
        p = ((p / 50) % 1) * 100;   // make the progress bar cycle around every 50K
    }

    $('#ProgressBar').css('width', p + '%');
    $("#sp_progressCount").html(str);
}