Django Web 集成 Cropper.js 图片剪辑插件
1.下载官方demo，了解需要的js，css文件和Api，最主要是了解初始化和options。
官方demo下载：https://pan.baidu.com/s/1rdgsWo_K4FelvM8CCkZPpg
提取码：5dwj
我的工程下载：https://pan.baidu.com/s/1qi17Bw7AA4P9TUbcyq4waw
提取码：9zbe
2.python图片上传处理，需要了解base64编解码和blob、FormData等：
3.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()
4.blob、FormData暂时略。
5.前台Ajax传图片Base64数据到后台处理完整流程
5.1 Ajax 上传
- 得到Canvas：
var Canvas = $("#image").cropper('getCroppedCanvas');
5.2. 转Base64
var data = Canvas.toDataURL("img/*",0.5);
5.3. 上传
//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 () {
}
});
5.4. 后台处理
#取前台传过来的base64 data
imageBase64_json = req.POST['imageBase64']
imageBase64 = json.loads(imageBase64_json)
print("imageBase64:",imageBase64[:200])
strBase64 = req.POST['strBase64']
print(" strBase64:",strBase64[:200])
5.5. 打印传过来的Base64数据，发现和之前测试的Base64数据长得不一样，多了一个头。所以存图片的时候需要把真正的Base64数据分割出来，然后将数据存入图片文件。
# 拆分出真正的base64内容
head,content = strBase64.split(",")
imageData = base64.b64decode(content)
with open('3_1.jpg','wb') as f:
f.write(imageData)
f.close()
6.Blob的发送稍微有点区别。
6.1 先取得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")
7.之前是截取矩形图，现在尝试截取圆形图片。
7.1.在cropper.css中增加：
.cropper-face{
border-radius: 50%;
}
.cropper-view-box{
border-radius: 50%;
}
7.2.截原型图的方法其实就是在截取的矩形图上再画个圆，在圆中填充图片。
SourceCanvas 就是截取的矩形Canvas，类似于
var SourceCanvas = $("#image").cropper(‘getCroppedCanvas’);
//构造新的圆形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;
}
7.3.对于新的newCanvas来说，上传处理与矩形图都是一样。
8.最后看下效果
8.1 前台页面，就只有那个Upload按钮是我自己写的咯。。。。。。
8.2 剪辑出来的矩形和圆形图片
