Question

我正在使用这个jQuery image cropper并且我试图将裁剪图像发送到后端，所以在裁剪之后，我必须得到裁剪数据（结果是画布，使用＆＃39; getCroppedCanvas＆＃39;）然后我尝试将画布输出转换为blob

$("#image").cropper('getCroppedCanvas').toBlob(function (blob){})

但是它引发了我的错误（参见下文）

未捕获的TypeError：$（...）。cropper（...）。toBlob不是函数

请解决我的问题的任何帮助，线索，想法，建议和建议？

＆＃13;

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
        	$("#gallery_image").remove();
        	$('input[name="image"]').next('#gallery_image').remove();
            $('input[name="image"]').after('<div id="gallery_image" style="margin-top:15px;"><div><img src="'+e.target.result+'" style="max-width:100%;" id="image"></div><div style="display:table;margin:15px auto 0px auto;"><button id="crop">Crop</button></div></div>');

            $(function () {
		      var $image = $('#image');
		      $image.cropper({
		      	viewMode: 1,
		        dragMode: 'move',
		        autoCropArea: 0.65,
		        restore: false,
		        guides: false,
		        highlight: false,
		        cropBoxMovable: false,
		        cropBoxResizable: false,
		        built: function () {
		            $image.cropper('setCropBoxData', {
		              width : 231,
		              height : 180
		            });
		          // }
		        }
		      });
		    });
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('input[name="image"]').change(function(){
    readURL(this);
});

 $(document).on("click","#crop", function(e){
    e.preventDefault();
 	$("#image").cropper('getCroppedCanvas').toBlob(function (blob) {
      $("form").append('<input type="hidden" name="image" value="'+blob+'">');
    });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.js"></script>


<form>
  <input type="file" name="image">
</form>

＆＃13;

toBlob canvas返回＆＃34;不是函数＆＃34;

0 个答案: