クロッピングされた画像をサーバーに送信する

Question

私は設計しているウェブサイトにChen Fengyuan's 'cropperjs'を統合しようとしています。しかし、JavascriptとjQueryに関する私の限られた知識は、私を止めさせてくれました。

キャンバスの下にあるボタンをクリックして（トリプルキャンバスを取得するボタンに似た）ボタンをクリックし、単純なjQuery AJAX呼び出しを使用して切り取ったイメージをサーバーにポストします。

画像が既にインターフェイス上でプレビューされているので、トリミングされた画像のプレビューは必要ありません。私は様々な方法を試してみましたが、持ってきた

ReferenceError: cropper is not defined

：たびに私がしようとすると、私は、ブラウザのエラーなどの取得「cropperjs」ドキュメントに記載されているメソッドを使用しているためしかし、私は正常にこれを行うように見えることはできませんオンラインでたくさんのソリューションを見たことがありますが、私はそれを正しいものにすることはできません。私は非常に間違っていることを知っていますが、JavascriptとjQueryについては十分理解していないためです。私は本当に苦労しています。ドキュメントにはCropperのコンストラクタで初期化が記述されていますが、これを行う方法はわかりませんが、これは私の問題がどこにあるのかと思います。誰も助けることができますか？

Answer 1

私は痛いほど興味を持っている人のためになるよう、この自分自身を解決するために管理してきた、ここで私が使用したコードがあります： -

var $image = $("#image"); 
     var cropper = $image.cropper(); 
     var baseURL = window.location.protocol+'//'+window.location.host; 
     var pho_id = $("input[name=pho_id]").val(); 
     var mem_id = $("input[name=mem_id]").val(); 
     var photopath = $("input[name=photopath]").val(); 
     $image.cropper('getCroppedCanvas').toBlob(function (blob) { 
       var formData = new FormData(); 
       formData.append('croppedImage', blob); 
       formData.append('pho_id', pho_id); 
       formData.append('mem_id', mem_id); 
       formData.append('photopath', photopath); 
       $.ajax(baseURL+'/path/', { 
        method: "POST", 
        data: formData, 
        processData: false, 
        contentType: false, 
        success: function() { 
         console.log('Upload success'); 
        }, 
        error: function() { 
         console.log('Upload error'); 
        } 
       }); 
     }, 'image/jpeg', 0.8);