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 * 100) + "%";    // 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功能。我希望它能修复bug。

如果没有，请尝试创建这样的新隐藏图像标记，然后将图像加载到画布中，并在画布中加载paraller。

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

2 个答案: