Problem Description:
When cropping images using cropper.js, call the toBlob() method to report an error
$("#image").cropper('getCroppedCanvas').toBlob( function (blob){})
Error message:
Uncaught TypeError: $(…).cropper(…).toBlob is not a function
Solution:
/* Use binary method to process dataUrl */ function processData(dataUrl) { var binaryString = window.atob(dataUrl.split(',')[1 ]); var arrayBuffer = new ArrayBuffer(binaryString.length); var intArray = new Uint8Array(arrayBuffer); for ( var i = 0, j = binaryString.length; i <j; i++ ) { intArray[i] = binaryString.charCodeAt(i); } var data = [intArray], blob; try { blob = new Blob(data); } catch (e) { window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if (e.name ==='TypeError' && window.BlobBuilder) { var builder = new BlobBuilder(); builder.append(arrayBuffer); blob = builder.getBlob(imgType); // imgType is the upload file type, that is, file.type } else { console.log( 'The version is too low to support uploading pictures' ); } } return blob; }
Finally call the code:
$('#cutBtn').click( function () { var data = $('#image').cropper('getCroppedCanvas' , { width: 300, // length and width after cropping height: 300 }), blob = processData(data.toDataURL()); var formData = new FormData(); formData.append( 'uploadImg' , blob); $.ajax({ url: '/path/to/upload' , method: "POST" , data: formData, processData: false , contentType: false , success: function () { console.log( 'Upload success' ); }, error: function () { console.log( 'Upload error' ); } }); });
cropper.js usage documentation
https://github.com/fengyuanchen/cropperjs/blob/master/README.md
Read More:
- mainfest Image Error: (img/icons/andriod-chrome-192×192.png)Download error or resource isn’t a vaild image
- [Solved] Docker Delete Image Error: Error: No such image
- OpenCV4 Error: imread(argv[1], CV_LOAD_IMAGE_COLOR);
- ValueError: Floating point image RGB values must be in the 0..1 range.
- [Solved] AttributeError: module ‘keras.preprocessing.image‘ has no attribute ‘load_img‘
- [Solved] React import the Path of Image error: cannot find mouse ‘.‘
- How to Solve “Status bar could not find cached time string image. Rendering in-process.” in Xcode
- [Solved] Labelimg Open an image Error: Error opening file
- [Solved] Camera Calibration Error: ErrorMessage: Image size does not match the measurement in camera parameters
- [Solved] dockerfile Build Image Error: Error: Failed to download metadata for repo ‘appstream’…
- [Solved] Harbor image replicate Error: Fetchartifacts error when collect tags for repos
- [Solved] Open3d error: unable to display image using open3d
- [Solved] Tensorflow2.0 Error: Function call stack:distributed_function
- React Hook “useState“ is called in function “xxx“ which is neither a React function component or
- TypeError: db.collection is not a function
- [Solved] Error: error C2601: ‘b‘ : local function definitions are illegal error C2063: ‘b‘ : not a function
- [Solved] Error ‘false‘ undeclared (first use in this function)
- error: (-215:Assertion failed) size.width>0 && size.height>0 in function ‘cv::imshow‘
- Numpy.exp Function Error ‘Float’ object has no attribute ‘exp’
- TypeError: res.render is not a function