从URL输入渲染/预览图像

Question

我正在寻找在通过输入网址上传之前呈现图片的解决方案。

我的代码

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

我一直在尝试方法like this。将onchange="readURL(this);"添加到上面提到的代码中什么都不做。它似乎只适用于本地文件。

Answer 1

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

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

FIDDLE

Answer 2

你可以使用画布。

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

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

试试我的小提琴http://jsfiddle.net/aliasm2k/tAum2/