使用进度条将图像加载到画布中

Question

我正在尝试使用此功能将图像引导到我的画布中：

  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-image-progress-events/ 我发现我可以使用这段代码：

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

Answer 2

我检查了你的链接。 http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/

我认为您没有任何显示进度条的功能。
从链接检查此代码

<img id="image"
 src="sample.jpg"
 onloadstart="showProgressBar()"
 onprogress="updateProgressBar(event)"
 onloadend="hideProgressBar()"/>

你有updateProgressBar函数，但你没有showProgressBar函数。我希望它会修复错误。

如果没有，请尝试像这样创建新的隐藏图像标签，然后在此处加载您的图像并在画布中并行加载。