使用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();”或日期字符串，但新的url是base64编码，所以这种方法行不通。

你有什么想法吗？

- gubbfett

Answer 1

1. 在所有元素之前创建一个图像容器；

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

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

---

你的HTML应该类似于：

您的HTML应该与以下内容类似：

<div id="img_container">

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

</div>

更改脚本行：

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

to:

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

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

- user5066707