Question

如何裁剪所选的图片？

我写过网页，让用户可以选择用旋转木马内的图片替换当前图片。

<div class="rcrop-wrapper">
    <img id="ZoomAvatarPicture" src="Pictures/PhotoAlbum/203.jpg" height="200" />
</div>

<div class="owl-carousel-v4 margin-bottom-40">
    <div class="owl-slider-v4">
        <div class="item"> 
            <img src="Pictures/PhotoAlbum/90.jpg"  onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/90.jpg"/>
        </div>
    <div class="item">
        <img src="Pictures/PhotoAlbum/22.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/22.jpg"/>
    </div>
    <div class="item">
        <img src="Pictures/PhotoAlbum/21.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/21.jpg"/>
    </div>
</div>

当我点击旋转木马中的图像时，ZoomAvatarPicture会被替换，正如我所料。我想裁剪新选择的ZoomAvatarPicture图像。我尝试过第三方裁剪软件（例如jQuery rcrop和imgAreaSelect），但是他们的裁剪图像是原始图像，203.jpg）

这是我为rcrop添加的代码：

jQuery(document).ready(function () {
    $('#ZoomAvatarPicture').rcrop({
        full: true,
        preserveAspectRatio: true,
        minSize: [50, 50],
        inputsPrefix: '',
        grid: false,
    });

    $('#ZoomAvatarPicture').on('rcrop-changed', function e() {
        var srcResized = $(this).rcrop('getDataURL', 50, 50);
        $('#cropped-resized').append('<img src="' + srcResized + '">');
    })
});

然后我有一个div来保存裁剪的图像

<div id="cropped-resized">
    <h3>Images resized (50x50)</h3>
</div>

由于我得到了与rcrop和imageSelect相同的结果，这让我相信问题不在软件中，而在于我对jQuery中可以做什么的理解。

此外，rcrop的演示页面位于：http://www.jqueryscript.net/demo/Responsive-Mobile-friendly-Image-Cropper-With-jQuery-rcrop/

我已添加此代码

function rcrop_Avatar() 
{

        var srcResized = $('#ZoomAvatarPicture').rcrop('getDataURL', 50, 50);
        $('#cropped-resized').append('<img src="' + srcResized + '">');
        alert('src = ' + $('#ZoomAvatarPicture').attr('src') );
}

function resetListener()
{
    $('#ZoomAvatarPicture').off(onclick, 'rcrop-changed', rcrop_Avatar);
    $('#ZoomAvatarPicture').rcrop({
        preserveAspectRatio: true,
        minSize: [100, 100],
        inputs: true,
        inputsPrefix: '',
        preview: {
            display: true,
            size: [200, 200],
            wrapper: '#custom-preview-wrapper'
        }
    });
    rcrop_Avatar();
}

jQuery(document).ready(function () {
    App.init();
    App.initScrollBar();
    Datepicker.initDatepicker();
    OwlCarousel.initOwlCarousel();
    CirclesMaster.initCirclesMaster1();
    StyleSwitcher.initStyleSwitcher();
    $('#ZoomAvatarPicture').rcrop({
        preserveAspectRatio: true,
        minSize: [100, 100],
        inputs: true,
        inputsPrefix: '',
        preview: {
            display: true,
            size: [200, 200],
            wrapper: '#custom-preview-wrapper'
        }
    });
    $('#ZoomAvatarPicture').on('rcrop-changed', rcrop_Avatar);
});

并将HTML修改为：

<div class="item">
    <img src="Pictures/PhotoAlbum/Work/90.jpg"  onclick="$('#CurrentAvatarPicture').attr('src','Pictures/PhotoAlbum/Work/90.jpg');resetListener();"/>
</div>

我仍然得到相同的结果。（即裁剪后的图像是原始图像，而不是新选择的图像）。

整个过程采用自举模式。我开始认为我应该放弃这条路线并将所有内容放入一系列标签式iframe中。

Answer 1

显然，rcrop不喜欢动态更改属性或主题，并且destroy方法非常混乱，因为它有时会删除原始对象或留下预览显示。

所以，为了避免这种情况，我改变了一些行为以删除遗骸，然后重新创建图像并将其再次附加到rcrop。

由于答案的大小限制而且无法上传rcrop的js和css，我制作了这个Codepen：http://codepen.io/LordNeo/pen/XpxVVv

以下是相关部分，以便您查看修改，有关工作示例，请参阅上面的CodePen。

$(document).ready(function () {
    $('#ZoomAvatarPicture').rcrop({
        full: true,
        minSize : [50,50],
        preserveAspectRatio : true,
        inputsPrefix: '',
        grid: false,
        preview : {
          display: true,
          size : [100,100],
        }
    });
});

function changeImage(imgsrc) {
   $('#ZoomAvatarPicture').rcrop("destroy");
   $('#ZoomAvatarPicture').remove();
   $('.rcrop-preview-wrapper').remove();
   $('.rcrop-wrapper').prepend('<img id="ZoomAvatarPicture" src="'+imgsrc+'" height="200" />');
   $('#ZoomAvatarPicture').rcrop({
     full: true,
     minSize : [50,50],
     preserveAspectRatio : true,
     inputsPrefix: '',
     grid: false,
     preview : {
       display: true,
       size : [100,100],
     }
   });
}

<div class="rcrop-wrapper">
    <img id="ZoomAvatarPicture" src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG1" height="200" />
</div>

<div class="owl-carousel-v4 margin-bottom-40">
    <div class="owl-slider-v4">
        <div class="item"> 
            <img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2"  onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2')"/>
        </div>
    <div class="item">
        <img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3')"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4')"/>
    </div>
</div>

jQuery选择一个图像，然后裁剪它

1 个答案: