我正在使用 cropit.js
jquery 插件在浏览器中裁剪图像。
插件网站是here .
我遇到的问题是,我根据点击的图像动态加载图像。
第一个图像加载良好,一切正常。但是,如果我单击第二个图像或任何其他图像,它不会加载到裁剪区域,并且第一个图像由于某种原因总是卡在裁剪区域中。
我尝试创建一个 Fiddle 来解释这一点,但我认为由于某些安全原因,外部图像不会使用cropit.js 加载。另外,jsfiddle 不允许 http: url,所以我无法启动并运行 fiddle。但我的代码结构是这样的:https://jsfiddle.net/hhshgeed/
您只需在一个简单的 html 文件中本地运行它,所有可用的图像都与您的 html 文件位于同一文件夹中。 此外,您还需要包含cropit.js。
这是我的整个代码:
$('.position').live('click', function(){
var img = $(this).attr('src');
alert(img);
// Re-enables the cropper.
// Does the opposite to `disable` method.
$(function() {
$('.image-editor').cropit({
imageBackground: true,
imageBackgroundBorderWidth: 20,
imageState: {
src: ''+img+'',
}
});
$('.rotate-cw').click(function() {
$('.image-editor').cropit('rotateCW');
});
$('.rotate-ccw').click(function() {
$('.image-editor').cropit('rotateCCW');
});
$('.export').click(function() {
var imageData = $('.image-editor').cropit('export', {
type: 'image/webp',
quality: .9,
originalSize: true
});
});
});
});
正如您在我的代码中看到的,我尝试在cropit src
函数中使用变量img
。这有效,但只能一次。
imageState: {
src: ''+img+'',
}
有人可以就这个问题提出建议吗,因为我真的在用头撞墙。
提前致谢。
最佳答案
您需要使用 - 销毁 cropit 的当前实例
$('.image-editor').cropit('destroy');
关于javascript - jQuery:cropit 删除图像数据并替换为新数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36779437/