使用 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 (将#修改为@）