Изменить размер изображения на стороне клиента

Question

Я пытаюсь изменить размер изображений из поля ввода.

В настоящее время я получаю сообщение об ошибке: Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

И я не совсем уверен, как это все делается. Могу ли я просто изменить размер файла, а затем продолжить процесс формы?

Код:

$("input#item-images").change(function() { 
     var file = this.files; 

     jQuery.each(file, function(i, val) { 
      alert(i + val['name']); 

      var file = val['name']; 

      var img = document.createElement("img"); 
      var reader = new FileReader(); 
      reader.onload = function(e) {img.src = e.target.result} 
      reader.readAsArrayBuffer(file); 

      var ctx = canvas.getContext("2d"); 
      ctx.drawImage(img, 0, 0); 

      var MAX_WIDTH = 800; 
      var MAX_HEIGHT = 600; 
      var width = img.width; 
      var height = img.height; 

      if (width > height) { 
       if (width > MAX_WIDTH) { 
        height *= MAX_WIDTH/width; 
        width = MAX_WIDTH; 
       } 
      } else { 
       if (height > MAX_HEIGHT) { 
        width *= MAX_HEIGHT/height; 
        height = MAX_HEIGHT; 
       } 
      } 
      canvas.width = width; 
      canvas.height = height; 
      var ctx = canvas.getContext("2d"); 
      ctx.drawImage(img, 0, 0, width, height); 

      var dataurl = canvas.toDataURL("image/png"); 

     }); 

     console.log(file); 
    }); 

Answer 1

Вы назначаете имя свойства объекта файла в переменную file, когда вы делаете var file = val['name'];, а затем передавая имя readAsArrayBuffer в reader.readAsArrayBuffer(file);.

Чтобы исправить это, вы могли бы заменить этот код:

var file = this.files; 

    jQuery.each(file, function(i, val) { 
     alert(i + val['name']); 

     var file = val['name']; 

С этим:

jQuery.each(this.files, function(i, file) { 
     alert(i + file['name']); 

Однако, когда вы решить эту проблему, то следующий вопрос всплывает, который является то, что canvas является не определено. Я не знаю, ожидаете ли вы, что остальная часть кода работает, может быть, вы определили холст где-то в другом месте.