使用 base64 更改 src 后刷新图像元素答案

【问题标题】：Refresh image element after altering src with base64使用 base64 更改 src 后刷新图像元素
【发布时间】：2016-07-01 23:20:13
【问题描述】：

我将 jquerycropbox 用于一个小项目。首先<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编码的，因此不起作用。

有什么想法吗？

【问题讨论】：

标签： javascript jquery html image

【解决方案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 + '"/>');

【讨论】：