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);

},

但是我收到了这个错误：

未捕获TypeError：$ input.next（...）。getContext不是函数

在这一行：

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

我该如何解决这个问题？

Answer 1

请尝试使用以下代码：

beforeShow: function(input, inst) {
    inst.dpDiv.addClass('notranslate');
}

您的var ctx = $input.nextAll('.myCanvas')[0].getContext("2d");不是下一个文件输入的直接兄弟。因此，要访问画布，您需要使用.myCanvas https://api.jquery.com/nextAll/

Answer 2

使用$input.next('.myCanvas')将为您提供jQuery对象，该对象不支持.getContext()。您需要从jQuery对象获取本机JS版本（在jQuery对象上添加[0]或.get(0)）：

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

修改：由@A评论。使用$input.next('.myCanvas')的Wolff将无法匹配任何内容，因为.next()只会查看下一个兄弟（在这种情况下为img，其中没有myCanvas类。所以你需要使用.nextAll()代替。

Javascript / Jquery图像预览与画布

2 个答案: