带画布的Javascript/Jquery图像预览

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

这个Html被生成，在本例中是3次：（我只显示其中一次）

但我得到了这个错误：

未捕获类型错误：$input.next（…）。getContext不是函数

在这一行：

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

如何解决此问题？

使用

$input。下一步（'.myCanvas'）

将为您提供jQuery对象，该对象不支持

.getContext（）

。您需要从jQuery对象获取本机JS版本（在jQuery对象上添加

[0]

或

.get（0）

）：

---

Edit：正如@A.Wolff使用

$input所评论的那样。next（'.myCanvas'）

将不匹配任何内容，因为

。next（）

将只查看下一个同级（在本例中是

img

，它没有

myCanvas

类）。因此，您需要使用

请尝试使用以下代码：

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

---

您的

.myCanvas

不是文件输入的下一个直接同级。因此，要访问画布，您需要使用

.nextAll（）

getContext

是

CanvasElement

的一种方法，而不是

jQuery对象的方法。。使用
$input.next（'.myCanvas'）.get（0）.
并且画布不是文件的下一个元素input@Rayon谢谢你的建议，但它不起作用，我收到相同的错误信息谢谢你的建议，我尝试过，但它不起作用，相同error@JohnDoe2因为无论如何，
$input.next（'.myCanvas'）
与任何内容都不匹配。例如：
var ctx=$input.nextAll（'.myCanvas'）[0].getContext（“2d”）@A.Wolff你说我不懂是什么意思it@JohnDoe2请参见，它只针对下一个后续同级，这在您发布的HTML标记中不是这样的：
获取匹配元素集中每个元素的紧跟其后的同级。如果提供了选择器，则仅当它与该选择器匹配时，才会检索下一个同级。
“您需要从jQuery对象获取本机JS版本”您指的是DomeElement吗？jQuery是本机javascript。好吧，为什么会有否决票
$input.nextAll（'.myCanvas'）.first（）[0]
看起来多余，但它不是假的这实际上起作用了我得到了预览，但我也得到了错误奇怪的是，我将尝试几次more@A.Wolff-实际上，我以前从未在画布上工作过，所以没有想过将jQuery对象转换为本机DOM元素。后来我更新了我的答案，以便OP和其他so用户能够获得正确的信息。@JohnDoe2-谢谢您的编辑。你说得对。通过
[0]
我们得到了正确的参考。
var ctx = $input.next('.myCanvas').getContext("2d");

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

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