cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。) |
您所在的位置：网站首页 › 触摸屏如何裁剪图片尺寸 › cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。) |
|
https://blog.csdn.net/qq727013465/article/details/51823231
我的需求功能：在手机端实现上传头像，带裁剪框。
cropper.js 通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。
cropper 文档：官方文档是全英文的，好吧我看不懂。只能一个个试试效果，就有了下面的总结。官方文档 -1) {
return;
}
data = {
method: target.getAttribute('data-method'),
target: target.getAttribute('data-target'),
option: target.getAttribute('data-option'),
secondOption: target.getAttribute('data-second-option')
};
if (data.method) {
if (typeof data.target !== 'undefined') {
input = document.querySelector(data.target);
if (!target.hasAttribute('data-option') && data.target && input) {
try {
data.option = JSON.parse(input.value);
} catch (e) {
console.log(e.message);
}
}
}
if (data.method === 'getCroppedCanvas') {
data.option = JSON.parse(data.option);
}
result = cropper[data.method](data.option, data.secondOption);
switch (data.method) {
case 'scaleX':
case 'scaleY':
target.setAttribute('data-option', -data.option);
break;
case 'getCroppedCanvas':
if (result) {
fileImg = result.toDataURL('image/jpg');
$("#showImg").attr("src",fileImg).show();
$("#photoBtn").val("重新选择");
}
break;
case 'destroy':
$("#inputImage").val("");
$("#containerDiv").hide();
$("#imgEdit").hide();
break;
}
if (typeof result === 'object' && result !== cropper && input) {
try {
input.value = JSON.stringify(result);
} catch (e) {
console.log(e.message);
}
}
}
};
// Import image
var inputImage = document.getElementById('inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
inputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
blobURL = URL.createObjectURL(file);
cropper.reset().replace(blobURL);
} else {
window.alert('Please choose an image file.');
}
}
$(inputImage).find("img").hide();
};
} else {
inputImage.disabled = true;
inputImage.parentNode.className += ' disabled';
}
};
[html] view plain copy
$("#imgCutConfirm").bind("click",function(){
$("#containerDiv").hide();
$("#imgEdit").hide();
$("#getCroppedCanvasModal").modal("hide");
})
获取截图 并ajax提交, [html] view plain copy //提交表达 function submitForm(){ $("#registerForm").attr("enctype","multipart/form-data"); var formData = new FormData($("#registerForm")[0]); formData.append("imgBase64",encodeURIComponent(fileImg));// formData.append("fileFileName","photo.jpg"); $.ajax({ url: "", type: 'POST', data: formData, timeout : 10000, //超时时间设置，单位毫秒 async: true, cache: false, contentType: false, processData: false, success: function (result) { }, error: function (returndata) { } }); }
使用canvas生成的截图。我只找到生成base64的。就是那一长串字符。。 原本我想生成jpg / png ，，没找到。 后来找到在后台 把base64 的转成jpg/png 的方法。 然后又把图片上传到七牛上面，发现可以使用二进制流上传，就不用jpg了 后台处理base64 java代码片段 [html] view plain copy /** * 上传base64 * @param imgBase64 图片base64 * @param fileName 图片名称 * @return */ private String uploadImgBase64(String imgBase64,String fileName){ String uploadPath=FILEDATE; String fileExt = fileFileName.substring(fileFileName.lastIndexOf(".") + 1).toLowerCase();//上传的文件的后缀 String newFileName = fileName+ "." + fileExt;//上传后的文件名字 String uploadPathName = uploadPath + newFileName;//获取到上传后的文件路径+文件名 BASE64Decoder decoder = new BASE64Decoder(); imgBase64 = imgBase64.substring(30); try { imgBase64 = URLDecoder.decode(imgBase64,"UTF-8"); byte[] decodedBytes = decoder.decodeBuffer(imgBase64);// 将字符串格式的imagedata转为二进制流（biye[])的decodedBytes for(int i=0;i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |