如何解决使用 dropzone 和裁剪器裁剪照片
我有一个问题。我想在我的项目中使用 dropzone 和cropper 裁剪照片。我来到了某个点,但我无法继续。当您在 html 部分未指定照片时,它不会打开文件。当有照片时,裁剪部分是无缝的。我在哪里失踪?所需代码如下
<div class="col-md-12">
<div id="dropzone">
<label>foto</label>
<form class="dropzone needsclick" id="CampaignBannerImage" action="#">
<div class="dz-message needsclick">
</div>
</form>
</div>
<!--Cropper part-->
<div class="ImageCropper">
<img id="image" src=""/>
</div>
</div>
//Drag and Drop
$("#CampaignBannerImage").dropzone({
url : "#",uploadMultiple: false,maxFilesize: 0.5,maxFiles: 1,addRemoveLinks: true,createImageThumbnails: true,dictRemoveFile: "Remove",dictCancelUpload: "Remove",addedfile: function (file) {
CropBannerImage();
}
});
function CropBannerImage() {
var image = document.querySelector('#image');
var cropper = new Cropper(image,{
minContainerWidth: 767,minContainerHeight: 480,data: {
height: 300,width: 300,x: 300,y: -100,scaleX: 1,scaleY: 1
},ready: function () {
var image = new Image();
image.src = cropper.getCroppedCanvas().toDataURL('image/jpeg');
},});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。