CI自定义图片剪裁类遇到的坑

    |     2018年3月28日   |   学习偶记   |     评论已关闭   |    137

闲的没事,想结合js和ci做一个文件剪裁的自定义类,在开发过程中,CI部分较为简单,主要是js部分,遇到了各种浏览器不兼容,苦逼的要死。

先做了功课,计划用cropper.js[1.3,非jquery插件版]来做客户端的裁剪工具。

项目地址:https://fengyuanchen.github.io/cropperjs/

坑1:blob二进制上传,xhr方式多个浏览器不兼容,遂放弃。不清楚jquery的ajax能否顺利解决。

以下是放弃后的代码[仅供参考]:


//进行裁剪
result = cropper.getCroppedCanvas({
width: 512,
height: 512,
minWidth: 128,
minHeight: 128,
maxWidth: 512,
maxHeight: 512,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
});
if (result.toBlob) {
result.toBlob(
function (blob) {
var formData = new FormData();
var fileName = 'mypic.jpg';
formData.append('file', blob, fileName);
formData.append('id', '123');
// Use ajax method
var xhr = getHttpObj();
xhr.open('post', 'php上传接收文件');
// 监听上传进度 IE不支持
if (typeof(xhr.upload) !== 'object') {
// upload progress event not supported
}
else
{
xhr.upload.onprogress = function (ev) {
// 事件对象
console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
console.log(percent);
//progress是进度条Html元素//progress.style.width = percent;
};
}
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//上传成功
console.log(xhr.responseText);
alert("上传成功");
}
else
{
console.log(xhr.status);
alert('NO');
}
}
},
'image/jpeg',
1
);
}
function getHttpObj() {
var httpobj = null;
try {
httpobj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpobj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e1) {
httpobj = new XMLHttpRequest();
}
}
return httpobj;
}

噢!评论已关闭。