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 + '"/>');

用base64改变src后刷新图像元素

1 个答案: