Javascript/Jquery изображение предварительного просмотра с холстом

Question

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

Этот Html генерируется, в этом случае 3 раза :(плохо только показать одну из этих трех)

<input type="file" class="ImageInput"> 
<img class="input-preview" src="http://placehold.it/654x363" style="width:280px;height:150px;display:none;" /> 
<canvas class="myCanvas" width="400" height="200"></canvas> 

И это моя функция Js, которая должна просмотреть изображение:

readURL: function() { 

    var $input = $(this); 

    if (this.files && this.files[0]) { 

     var reader = new FileReader(); 

     reader.onload = function(e) { 
      $input.next('.input-preview').attr('src', e.target.result); 
      var ctx = $input.next('.myCanvas').getContext("2d"); 
      ctx.drawImage($input.next('.input-preview')[0], 0, 0, 400, 200); 
     } 

     reader.readAsDataURL(this.files[0]); 
    } 

    $(".ImageInput").change(this.readURL); 

}, 

Но я получаю эту ошибку:

Uncaught TypeError: $input.next(...).getContext is not a function

На этой линии:

var ctx = $input.next('.myCanvas').getContext("2d"); 

Как решить эту проблему?

Answer 1

Можешь ли вы попробуйте следующий код:

var ctx = $input.nextAll('.myCanvas')[0].getContext("2d"); 

Вашего .myCanvas не рядом немедленной родственное входной файл. Итак, чтобы добраться до холста, вам нужно использовать .nextAll()https://api.jquery.com/nextAll/

Answer 2

Используя $input.next('.myCanvas'), вы получите объект jQuery, который не поддерживает .getContext(). Вы должны получить нативную версию JS от объекта JQuery (добавить [0] или .get(0) на объект JQuery):

var ctx = $input.nextAll('.myCanvas')[0].getContext("2d"); 

Редактировать: Как прокомментировал @A. Вольф, использующий $input.next('.myCanvas'), ничего не будет соответствовать, поскольку .next() будет смотреть на самого следующего брата (будучи img в этом случае, который не имеет класса myCanvas). Поэтому вместо этого вам нужно будет использовать .nextAll().