cropper.js上传带有坐标的原始图像 [英] cropper.js uploading the original images with coordinates
本文介绍了cropper.js上传带有坐标的原始图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用cropper.js.我想上传原始图像,但裁剪后的坐标(x,y,width,height)不是裁剪后的图像.首选的方法是什么?
I am using cropper.js. I would like to upload the original image and the cropped coordinates(x,y,width,height) not the cropped image. What is the preferred way to do that?
谢谢.
推荐答案
对于此问题的客户端,这是我用来打包作物箱数据并将其运送到服务器的代码.参见esp:
For the client side of this question, here is code I use to package up the crop box data and ship it off to the server. See esp:
formData.append('last_crop', JSON.stringify($imageBox.cropper('getCropBoxData')));
$('#crop_button').click(function(){
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
// Store crop coordinates to db for future visit.
var canvas = $imageBox.cropper('getCroppedCanvas');
canvas.toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob); // 'croppedImage' is the sent filename
formData.append('last_crop', JSON.stringify($imageBox.cropper('getCropBoxData')));
$.ajax('{% url 'profile_crop_avatar' %}', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
}, "image/jpeg", 0.75);
// Also update masthead image after crop
$('#masthead-avatar').attr('src', canvas.toDataURL());
});
在服务器端(Django),我处理并存储以下坐标:
On the server side (Django) I handle and store the coords with:
# Save new image and crop coords to profile
p = request.user
p.last_crop_coords = request.POST.get('last_crop')
p.save()
这篇关于cropper.js上传带有坐标的原始图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文