jcrop 保存之前的图片

Question

我有一个正在裁剪的预览，以及一个显示被裁剪部分的缩略图。每当我选择一个新图像时，预览都不会更新，而是保留以前使用的图像。但是，缩略图确实得到了更新，因为它显示了新图像。这是我的代码...

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#previewSub2').attr('src', e.target.result);
            $('#previewSub').attr('src', e.target.result);
            ...
            var imgwidth = $("#previewSub2").width();
            var imgheight = $("#previewSub2").height();
            $("#previewSub").Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1,        
                setSelect: [0,imgwidth,0,0],
                minSize: [90,90],
                addClass: 'jcrop-light' 
             });
             ...

previewSub2 是缩略图，previewSub 是我要更新的 JCrop 图片。出于某种原因，以下代码未对其进行更新：

 $('#previewSub').attr('src', e.target.result);

这是我的 showPreview 的其余代码：

function showPreview(coords)
{
var imgSize = $("#previewSub").height();
var imgWidth =  $("#previewSub").width();

var rx = 150 / coords.w;
var ry = 150 / coords.h;

$('#x').val();
$('#y').val();
$('#w').val();
$('#h').val();

$('#previewSub2').css({
    width: Math.round(rx * imgWidth) + 'px',
    height: Math.round(ry * imgSize) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}

有人可以向我解释更新 previewSub 需要做什么吗？

Answer 1

您可以像这样重新加载 jcrop 组件

var jcrop_api = null;
function readURL(input) {
    if (input.files && input.files[0]) {
       var reader = new FileReader();

    reader.onload = function (e) {
        if( jcrop_api ) {
             jcrop_api.destroy();
        }

        $('#previewSub2').attr('src', e.target.result);
        $('#previewSub').attr('src', e.target.result);
        ...
        var imgwidth = $("#previewSub2").width();
        var imgheight = $("#previewSub2").height();

        jcrop_api = $("#previewSub").Jcrop({
            onChange: showPreview,
            onSelect: showPreview,
            aspectRatio: 1,        
            setSelect: [0,imgwidth,0,0],
            minSize: [90,90],
            addClass: 'jcrop-light' 
         });

更新：如果您使用的是最新版本的 jcrop，您应该这样设置 api：

$("#previewSub").Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: 1,        
    setSelect: [0,imgwidth,0,0],
    minSize: [90,90],
    addClass: 'jcrop-light' 
    }, function() {
        jcrop_api = this;
});

jcrop 保存之前的图片

Jcrop saves previous image

jquery

jcrop