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

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

闲的没事,想结合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;
    }

噢!评论已关闭。