загрузка изображения в холст с индикатором прогресса

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/ я сообразить, что я могу использовать этот snipet кода:

// 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 функции. Надеюсь, он исправит ошибку.

Если нет, попробуйте создать новый скрытый тег для изображений, подобный этому, и загрузите изображение и загрузите его в холст.