javascript - 使用 base64 更改 src 后刷新图像元素

Question

我正在为一个小项目使用 jquery cropbox。首先是<img>是默认图像，然后我执行上传和 FileReader 以将图像更改为本地存储的图像。

像这样

$('#selectfiledialog').change(function(evt){
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            $('#the_image').attr('src', fr.result);
        }
        fr.readAsDataURL(files[0]);
    }
});

但是，当我在该图像上启动裁剪功能时，它具有此处默认图像的旧值，即 500x500 图像。

所以，当我进行裁剪时，它还没有新的规范。

我现在如何根据新的 src 刷新 img 元素？ “添加 '?' + Math.random(); ”或日期字符串是我发现的唯一内容，但新网址是 base64 编码的，因此无法使用。

有什么想法吗？

Answer 1

1。先为镜像创建一个容器；

2。删除图像并在您创建的容器中添加另一个图像。

注意:如果您这样做，您将丢失对图像元素的引用，因为它将被删除。避免继续引用图像，var img = $('#the_image')，即

---

您的 HTML 应该类似于:

<div id="img_container">

    <img id="the_image" src=""/>

</div>

更改脚本行:

$('#the_image').attr('src', fr.result);

到:

$('#the_image').remove();

$('img_container')append('<img id="the_image" src="' + fr.result + '"/>');