我正在尝试使用this ajax图像预览javascript片段和cropper image jquery插件来创建ajax预览裁剪器。
到目前为止,我得到了图像的预览,然后您可以点击预览并裁剪图像:http://codepen.io/anon/pen/oXmmEq?editors=101
我遇到的主要问题是你想要选择另一张图片来裁剪。您之前选择的旧图像仍然存在。
我想要的是:
我想2你只需将图像裁剪器代码包装在一个函数中并执行此操作:
function PreviewImage(no) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage" + no).files[0]);
oFReader.onload = function(oFREvent) {
cropperCode(); // Wraps around image cropper code. Called when oFReader loads.
document.getElementById("uploadPreview" + no).src = oFREvent.target.result;
};
修改 我刚刚注意到cropper demo它在图片右下角附近有一个上传图标被裁剪。当我将鼠标悬停在其上时显示“使用Blob Urls导入图像”
我认为这是代码:
// Import image
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset').cropper('replace', blobURL);
$inputImage.val('');
} else {
$body.tooltip('Please choose an image file.', 'warning');
}
}
});
} else {
$inputImage.parent().remove();
}
感谢您提供的任何帮助。