原文章名：Django Web 集成 Cropper.js 图片剪辑插件
主要是思路，学习作者(foryou2013)的思路，Flask以及其他web框架均可适用。
如果你是新手，你会学习到了解base64的编码和解码，如何从Ajax中获取图像数据，如何将图片文件提交至服务器等等
文中所有引用部分（此样式部分）为转载者TheViperS添加，非原文。
下载官方demo，了解需要的js，css文件和api，最主要是了解初始化和options。
官方demo下载：https://pan.baidu.com/s/1rdgsWo_K4FelvM8CCkZPpg
提取码：5dwj
工程下载：https://pan.baidu.com/s/1qi17Bw7AA4P9TUbcyq4waw
提取码：9zbe
python图片上传处理，需要了解base64编解码和blob、FormData等;
base64编解码，eg：复制1.jpg得到2.jpg，比较查看编解码的数据区别。
下面代码中的
建议写进文本文档中查看！！！
with open('1.jpg',"rb") as fout:
base64_data = base64.b64encode(fout.read())
#print(base64_data)
fout.close()
with open('2.jpg','wb') as fin:
fin.write(base64.b64decode(base64_data))
#print(base64.b64decode(base64_data))
fin.close()
blob、FormData暂时略。
前台Ajax传图片Base64数据到后台处理完整流程
Ajax 上传
得到Canvas：
var Canvas = $("#image").cropper('getCroppedCanvas');
转Base64
var data = Canvas.toDataURL("img/*",0.5);
上传
//ajax发送json格式和str格式的base64数据
$.ajax({
url:'/app1/upload/',
type:"POST",
data:{
"strBase64":data.toString(),
"imageBase64":JSON.stringify(data),
"newBase64":newCanvas.toDataURL("img/*",0.5),
},
timeout:60000,//60sec
async:true,//default true
success:function (result) {
//alert(result);
},
error:function () {
}
});
后台处理
#取前台传过来的base64 data
imageBase64_json = req.POST['imageBase64']
imageBase64 = json.loads(imageBase64_json)
print("imageBase64:",imageBase64[:200])
strBase64 = req.POST['strBase64']
print(" strBase64:",strBase64[:200])
打印传过来的Base64数据，发现和之前测试的Base64数据长得不一样，多了一个头。
这里推荐将两次的base64打印出来分别保存到不同的txt文件中，然后在线对比一下。推荐这个比较文本的网站：在线文本差异对比,文本比对、文本比较工具
所以存图片的时候需要把真正的Base64数据分割出来，然后将数据存入图片文件。
拆分出真正的base64内容
head,content = strBase64.split(",")
imageData = base64.b64decode(content)
with open('3_1.jpg','wb') as f:
f.write(imageData)
f.close()
Blob的发送稍微有点区别。
- 先取得Canvas,转blob格式：
var Canvas = $("#image").cropper('getCroppedCanvas');
- 用自带toBlob函数取得到Blob格式的数据。
Canvas.toBlob(function (blob){console.log(blob)});
- 或者自己写一个base64转blob函数
//base64转blob//
function dataUrltoBLob(dataurl){
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr],{type:mime});
}
- 前台上传：
构建FormData数据
var fd = new FormData();
fd.append('file', BlobData);
$.ajax({
url:'/app1/upload_blob/',
type:"POST",
data:fd,
timeout:60000,//60sec
async:true,//default true
processData: false, // 告诉jQuery不要处理数据
contentType: false, // 告诉jQuery不要设置类型
success:function (result) {
//alert(result);
},
error:function () {
}
});
- 后台处理：
@csrf_exempt
def UploadBlob(req):
if req.method == 'POST':
blob_file = req.FILES.get('file')
if blob_file:
print("blob_file",blob_file,type(blob_file))
# 构建返回值
resp_data = {}
resp_data['status'] = "Upload Blob data Successed !"
resp_json = json.dumps(resp_data)
return HttpResponse(resp_json)
else:
return HttpResponse("Not Post Req")
- 之前是截取矩形图，现在尝试截取圆形图片。
在cropper.css中增加：
.cropper-face{
border-radius: 50%;
}
.cropper-view-box{
border-radius: 50%;
}
- 截圆形图的方法其实就是在截取的矩形图上再画个圆，在圆中填充图片。
SourceCanvas 就是截取的矩形Canvas，类似于
var SourceCanvas = $("#image").cropper(‘getCroppedCanvas’);
因为没有Js基础，这里↑↓不是很明白，有Js基础的可以仔细阅读并理解。
//构造新的圆形canvas/////////////////////////////////////////////
function GetRoundCanvas(SourceCanvas) {
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
var width = SourceCanvas.width;
var height = SourceCanvas.height;
newCanvas.width = width;
newCanvas.height = height;
//先画圆，clip剪切，填图
context.beginPath();
context.arc(width/2,height/2,Math.min(width,height)/2,0,Math.PI*2,true);
context.closePath();
context.clip();
context.drawImage(SourceCanvas,0,0,width,height);
//先填图，画圆，fill填充
{#context.imageSmoothingEnabled = true;#}
{#context.drawImage(SourceCanvas,0,0,width,height);#}
{#context.globalCompositeOperation = 'destination-in';#}
{#context.beginPath();#}
{#context.arc(width/2,height/2,Math.min(width,height)/2,0,Math.PI*2,true);#}
{#context.fill();#}
return newCanvas;
}
对于新的newCanvas来说，上传处理与矩形图都是一样。
最后看下效果
前台页面，就只有那个Upload按钮是我自己（原作者）写的。
裁剪出来的矩形和圆形图片
————————————————
版权声明：本文为CSDN博主「foryou2013」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/foryou2013/article/details/91043851
