使用 Canvas 预览 Javascript/Jquery 图像

Question

在输入字段中选择图像后，我尝试使用 Canvas 预览图像，但出现错误，

此 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不是文件输入的下一个直接兄弟。因此，要到达 Canvas ，您需要使用 .nextAll() https://api.jquery.com/nextAll/