Javascript / Jquery 带画布的图像预览答案

【问题标题】：Javascript / Jquery Image preview with canvasJavascript / Jquery 带画布的图像预览
【发布时间】：2017-01-06 10:49:35
【问题描述】：

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

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

},

但我收到此错误：

未捕获的类型错误：$input.next(...).getContext 不是函数

在这一行：

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

我该如何解决这个问题？

【问题讨论】：

getContext 是 CanvasElement 的方法，而不是 jQuery-object.. 使用 $input.next('.myCanvas').get(0)...
并且画布不是文件输入的下一个元素
@Rayon 感谢您的建议，但它不起作用我收到相同的错误消息

标签： javascript jquery image canvas

【解决方案1】：

你能试试下面的代码吗：

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

您的.myCanvas 不是文件输入的下一个直接兄弟。所以要到达画布，你需要使用.nextAll() https://api.jquery.com/nextAll/

【讨论】：

好的，为什么要投反对票？ $input.nextAll('.myCanvas').first()[0] 看起来多余但不是假的
这确实有效，我得到了预览，但我得到的错误也很奇怪，我会再试几次
@A.Wolff - 实际上我以前从未在画布上工作过，所以没有想过将 jQuery 对象转换为原生 DOM 元素。后来我更新了我的答案，以便 OP 和其他 SO 用户获得正确的信息。
@JohnDoe2 - 感谢您的编辑。你是对的。通过[0]，我们得到了正确的参考。

【解决方案2】：

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

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

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

【讨论】：

感谢您的建议，我试过了，但没有用，同样的错误
@JohnDoe2 因为无论如何$input.next('.myCanvas') 不匹配任何东西。它应该是例如：var ctx = $input.nextAll('.myCanvas')[0].getContext("2d");
@A.Wolff 嗯你是什么意思我不明白
@JohnDoe2 请参阅DOC for next()，它仅针对下一个以下同级，而在您发布的 HTML 标记中并非如此：Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
"你需要从 jQuery 对象中获取原生 JS 版本" 你是说 DOMElement 吗？ jQuery 是原生 javascript。