从URL输入中渲染/预览图像

Question

我希望您能提供一种解决方案，在通过输入URL上传之前渲染图像。

我的代码

<input name="thumbnail" placeholder="Post image URL here" />

我一直在尝试像这样的方法。将onchange="readURL(this);"添加到上述代码中没有任何作用。它们似乎只适用于本地文件。

- wp student

---

你是否也有一个<img>标签，就像这个答案中的一样？ - Trojan

完整的可工作代码段在此处：https://stackoverflow.com/a/56798296 - Aónio

Answer 1

使用输入值作为图像标记的源。您可以隐藏和显示图像标记，每次创建一个新图像，等待加载事件并显示旋转器，使用默认图像，可能性无限。

$('[name="thumbnail"]').on('change', function() {
     $('img.preview').prop('src', this.value);
});

FIDDLE

- adeneo

---

谢谢，我在Chrome和Firefox上都测试过了。它运行得非常顺畅。 - wp student

Answer 2

你可以使用画布（canvas）。

var oCanvas = doc.getElementById('imgThumb'),
    oContext = oCanvas.getContext('2d');

oContext.drawImage(this, 0, 0, nWidth, nHeight);

请尝试我的fiddle http://jsfiddle.net/aliasm2k/tAum2/

- user2672373