我一直在尝试使用文件阅读器和croppie来允许用户在上传之前在本地编辑他们的图像(缩放/旋转/裁剪),但似乎无法让它正常工作。我怀疑这是一个DOM问题,因为模态,但我不能为我的生活弄清楚如何让它工作!
FileReader () stuff
//
//
//create elements for image, edit and delete buttons, then appending to parent div
//
//
//place the new image and button into the new div
newdiv.appendChild(newimage);
newdiv.appendChild(newedit);
newdiv.appendChild(newdelete);
//place the new div into the results div
output.appendChild(newdiv);
//add event listeners to dynamically created buttons
newdelete.addEventListener('click', delImage, false);
newedit.addEventListener('click', showModal, false);
.
.
.
function showModal(){
var edit_id = this.getAttribute("dataset-editid");
var image_id = document.getElementById('img-'+edit_id);
var thisImage = image_id.src;
$('#'+edit_id).click(function(){
$("#cropImagePop").modal();
});
console.log(edit_id);
console.log('image source: ' + image_id);
var themodal = document.getElementById('cropImagePop');
var theimage = document.getElementById('cropimage');
var instance = new Croppie(theimage, {
viewport: { width: 300, height: 300 },
boundary: { width: 900, height: 600 },
showZoomer: true,
enableResize: true,
url: thisImage
});
}
当我点击任何给定图片的动态“编辑”按钮时,模态会打开,但照片非常大(不在模态中),并且没有要裁剪的边框。
这是一个小提琴:https://jsfiddle.net/noz2eb3y/
另外 - 我绝不和Croppie结婚 - 如果有人有一个伟大的(工作!)javascript库,他们知道哪些可以缩放/旋转/裁剪图像 - 我都是耳朵!
回答你的问题:是的,这是可能的。
模态窗口的问题是因为您忘记添加croppie css引用。
我修复了这个fiddle并且还在crop按钮上添加了一个函数来更新源元素。
请参阅以下示例:
$('#cropImageBtn').click(function(){
instance.result('base64').then(function(base64) {
image_id.src = base64;
cleanModal();
});
});
$('#closeImageBtn').click(function(){
cleanModal();
});
function cleanModal()
{
instance.destroy();
$("#cropImagePop").modal("hide");
}
如果要上传图像,则需要执行后续步骤。
我还建议改进你的代码(它有点混乱)。