canva 压缩图片

php

存储图片

 

if(!isset($_POST[\'imgData\'])) {
            $rawData = $GLOBALS["HTTP_RAW_POST_DATA"];
            $fieldDatas = explode(\'&\', $rawData);
            foreach ($fieldDatas as $fieldData) {
                list($field, $value) = explode(\'=\', $fieldData);
                $_POST[$field] = urldecode($value);
            }
       }
       

        $imgOrientation = $_POST[\'imgOrientation\'];
        $imgData = $_POST[\'imgData\'];
        if (!$imgData) {
            $this->ajax_fail_exit(\'没有图片内容\');
        }
        $imgData = urldecode($imgData);
        file_put_contents(\'/tmp/aaaa.txt\', $imgData);

        $isMatch = preg_match(\'#^data:([^;]*);base64,#U\', $imgData, $match);
        $imageType = \'\';
        if ($isMatch) {
            $imgData = str_replace($match[0], \'\', $imgData);
            $imageType = $match[1];
        }

        $imgData = base64_decode($imgData);

        $extMatch = array(
            \'image/gif\' => \'gif\',
            \'image/jpeg\' => \'jpg\',
            \'image/png\' => \'png\',
            \'image/bmp\' => \'bmp\',
        );
        if (!$imageType || !isset($extMatch[$imageType])) {
            $this->ajax_fail_exit(\'不是图片，无法上传\');
        }
        $file_ext = $extMatch[$imageType];

        #检查文件大小
        if (strlen($imgData) > 3072000) {
            $this->ajax_fail_exit(\'图片大小过大，应小于3M\');
        }

        $dir_name = \'image\';

        $uploadConfig = Config::getInstance()->get(\'upload_u\');
        //文件保存目录路径
        $save_path = $uploadConfig[\'path\'] . \'/\';
        //文件保存目录URL
        $save_url = $uploadConfig[\'url\'] . \'/\';
        $ymd = date("Ymd");
        $ymd = date("Y") . \'/\' . date(\'md\');
        $save_path .= $dir_name . "/" . $ymd . "/";
        $save_url .= $dir_name . "/" . $ymd . "/";
        //新文件名
        $new_file_name = date("His") . \'_\' . rand(10000, 99999);
        # 保存文件路径
        $save_file_path = $save_path . $new_file_name . \'.\' . $file_ext;
        # 图片地址
        $imageUrl = $save_url . $new_file_name . \'.\' . $file_ext;

        # 上传图片
        #检查目录
        if (@is_dir($save_path) === false) {
            #创建目录
            if (!mkdir($save_path, 0777, true)) {
                $this->ajax_fail_exit("创建目录失败：{$save_path}");
            }
        }

        #检查目录写权限
        if (@is_writable($save_path) === false) {
            $this->ajax_fail_exit("上传目录没有写权限");
        }

        #移动文件        
        if (!file_put_contents($save_file_path, $imgData)) {
            $this->ajax_fail_exit("上传文件失败");
        }

        // 压缩65质量原图
        $this_basename = basename($save_file_path);
        $this_dirname = dirname($save_file_path);
        $z_file_path = $this_dirname.\'/\'.\'z.\'.$this_basename;        
        \KIF\Image::transformFormat($save_file_path,$z_file_path,\'JPG\');
        $img = imagecreatefromjpeg($z_file_path);
                
        // 获取拍摄角度 旋转图片
        if($imgOrientation && $imgOrientation==6){
            $new=imagerotate($img,-90,0);
            imagejpeg($new,$z_file_path,65);
            imagedestroy ($new);
        }else{
            imagejpeg($img,$z_file_path,65);
            imagedestroy ($img);
        }
                
        @chmod($save_file_path, 0777);
        
        $imageUrl = $save_url .\'z.\' . $new_file_name . \'.\' . $file_ext;

        list($width, $height) = getimagesize($z_file_path);

        $result = array(
            \'il\' => $imageUrl,
            \'w\' => $width,
            \'h\' => $height,
        );
        $this->ajax_success_exit($result);

 

 

 

 

js

// 小米手机上传图片太大或没有获取到图片的type    
    var extStr = \'gif,jpg,jpeg,png,bmp\';
    var extMimeMatch = new Array();
    extMimeMatch[\'gif\'] = \'image/gif\';
    extMimeMatch[\'jpg\'] = \'image/jpeg\';
    extMimeMatch[\'jpeg\'] = \'image/jpeg\';
    extMimeMatch[\'png\'] = \'image/png\';
    extMimeMatch[\'bmp\'] = \'image/bmp\';

    var useCompressUpload = 1;
    if (navigator.userAgent.match(/MI\s1S/i)) {
        useCompressUpload = 0;
    }
    if (useCompressUpload) {
        compressUploadImg(); // 压缩上传
    } else {
        normalUploadImg(); //图片上传
    }

    function normalUploadImg() {
        $("input[type=file]").change(function(e) {
            var arrUrl = [];
            var files = e.target.files || e.dataTransfer.files;
            var $frm = $(this).parents(\'div[data-form]\');
            var imgUrlsInput = $(\'input[name=imgUrls]\', $frm);
            var className = $(this).attr(\'data-form-class\');
            var newUrl = list = \'\';
            clearMsg($frm);
            var imgUrls = imgUrlsInput.val();
            if (imgUrls)
                arrUrl = imgUrls.split(\',\');
            if (files.length + arrUrl.length > 8) {
                showMsg($frm, \'图片最多上传8张\');
                return false;
            }

            for (var i = 0, file; file = files[i]; i++) {
                var tmpStr = file.type.toLocaleLowerCase();
                // 小米手机有时获取到的file.type为空
                var tmpName = file.name.toLocaleLowerCase();
                var tmpIndex = tmpName.lastIndexOf(\'.\') + 1;
                if (!tmpStr && tmpIndex) {
                    // 检查后缀
                    var ext = tmpName.substr(tmpIndex);
                    if (extStr.indexOf(ext) < 0) {
                        showMsg($frm, \'文件"\' + file.name + \'"不是图片。\');
                        return false;
                    }
                }
                if (tmpStr && tmpStr.indexOf("image") != 0) {
                    //if (file.type.indexOf("image") != 0) {
                    showMsg($frm, \'文件"\' + file.name + \'"不是图片。\');
                    return false;
                }

                if (file.size >= 3072000) {
                    showMsg($frm, \'您这张"\' + file.name + \'"图片大小过大，应小于3M\');
                    return false;
                }
            }

            for (var i = 0, file; file = files[i]; i++) {
                $(\'.btnSubmit\').attr(\'disabled\', \'disabled\');
                var faphoto = $(\'.faphoto-pop\', $frm);
                faphoto.show();
                list = \'<li class="thumb" cname="0"><div class="img"><span><i class="icon-load"></i><img class="success" style="display:none;" style="-webkit-transform-origin: 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"\';
                list += \'src="" xwidth="300" xheight="330"></span></div>\';
                list += \'<a class="clear" href="javascript:;"><i class="icon icon-clear"></i></a>\';
                list += \'</li>\';
                faphoto.find(\'.opt\').before(list);

            }

            for (var i = 0, file; file = files[i]; i++) {
                var form = new FormData();
                form.append("image", file);

                new IO({
                    url: "http://9night.kimiss.com/m/?c=Mobile_Thread&a=upload"
                    , contentType: false
                    , processData: false
                    , data: form
                    , type: \'post\'
                    , dataType: \'json\'
                    , beforeSend: function(xhr) {
                        // 上传监听 upload
                        console.log(xhr.getNativeXhr());
                        xhr.getNativeXhr().upload.addEventListener(\'progress\', function(ev) {
                            S.log({\'loaded\': ev.loaded, \'total\': ev.total});
                        });
                    }
                    , success: function(data) {
                        $(\'.btnSubmit\').removeAttr(\'disabled\');
                        if (data.error) {
                            clearMsg($frm);
                            showMsg($frm, data.message);
                            // 移除旋转的块
                            faphoto.find(\'.thumb .img span .icon-load\').parent().parent().parent().remove();
                            return false;
                        }
                        newUrl = data.url[0];
                        arrUrl.push(newUrl);
                        imgUrlsInput.val(arrUrl.join(\',\'));
                        list = \'<img class="success" style="-webkit-transform-origin: 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"\';
                        list += \'src="\' + newUrl + \'" xwidth="300" xheight="330">\';
                        faphoto.find(\'.thumb .img span .icon-load\').parent().last().html(list);

                        var imgUrlsNum = imgUrlsInput.val().split(\',\').length;

                        // 记录Offline中
                        if ($(\'#mianImgUrls\').val())
                            S.Offline.setItem(imgs_data_offline_key, $(\'#mianImgUrls\').val(), 24 * 60 * 60 * 1000);

                        if (imgUrlsNum == 8) {
                            $(\'.opt\').hide();
                        } else {
                            $(\'.opt\').show();
                        }
                    }
                });
            }
        });
    }
    function compressUploadImg() {
        $("input[type=file]").change(function(e) {
            var arrUrl = [];
            var files = e.target.files || e.dataTransfer.files;
            var $frm = $(this).parents(\'div[data-form]\');
            var imgUrlsInput = $(\'input[name=imgUrls]\', $frm);
            var newUrl = list = \'\';
            clearMsg($frm);
            var imgUrls = imgUrlsInput.val();
            if (imgUrls)
                arrUrl = imgUrls.split(\',\');
            if (files.length + arrUrl.length > 8) {
                showMsg($frm, \'图片最多上传8张\');
                return false;
            }

            // 验证图片大小格式
            // 小米手机有时获取到的file.type为空                
            for (var i = 0, file; file = files[i]; i++) {
                var tmpStr = file.type.toLocaleLowerCase();
                var tmpName = file.name.toLocaleLowerCase();
                var tmpIndex = tmpName.lastIndexOf(\'.\') + 1;
                if (!tmpStr && tmpIndex) {
                    // 检查后缀
                    var ext = tmpName.substr(tmpIndex);
                    if (extStr.indexOf(ext) < 0) {
                        showMsg($frm, \'文件"\' + file.name + \'"不是图片。\');
                        return false;
                    }
                }
                if (tmpStr && tmpStr.indexOf("image") != 0) {
                    showMsg($frm, \'文件"\' + file.name + \'"不是图片。\');
                    return false;
                }
            }
            // 上传的图片占位
            for (var i = 0, file; file = files[i]; i++) {
                $(\'.btnSubmit\').attr(\'disabled\', \'disabled\');
                var faphoto = $(\'.faphoto-pop\', $frm);
                faphoto.show();
                list = \'<li class="thumb" cname="0"><div class="img"><span><i class="icon-load"></i><img class="success" style="display:none;" style="-webkit-transform-origin: 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"\';
                list += \'src="" xwidth="300" xheight="330"></span></div>\';
                list += \'<a class="clear" href="javascript:;"><i class="icon icon-clear"></i></a>\';
                list += \'</li>\';
                faphoto.find(\'.opt\').before(list);
            }

            // 上传图片
            for (var i = 0, file; file = files[i]; i++) {
                var fileReader = new FileReader();
                var _file = file;
                var fileType = _file.type || \'\';

                if (!fileType) {
                    var tmpName = _file.name.toLocaleLowerCase();
                    var tmpIndex = tmpName.lastIndexOf(\'.\') + 1;
                    if (tmpIndex) {
                        // 检查后缀
                        var ext = tmpName.substr(tmpIndex);
                        fileType = extMimeMatch[ext];
                    }
                }
　　　　　　　　　　// 获取图片旋转角度 - 照相机拍照时有。需要把图片转正
                var imgOrientation = 0;
                EXIF.getData(_file, function() {
                    imgOrientation = EXIF.getTag(this, \'Orientation\');
                    imgOrientation = imgOrientation == undefined ? 0 : imgOrientation;
                });

                fileReader.readAsDataURL(_file);
                fileReader.onload = function(event) {
                    var result = event.target.result;   //返回的dataURL
                    var image = new Image();
                    image.src = result;
                    image.onload = function() {
                        //创建一个image对象，给canvas绘制使用
                        var cvs = document.createElement(\'canvas\');
                        var scale = 1;
                        if (this.width > 750) {  //1000只是示例，可以根据具体的要求去设定  
                            if (this.width > this.height) {
                                scale = 750 / this.width;
                            } else {
                                scale = 750 / this.height;
                            }
                        }

                        cvs.width = this.width * scale;
                        cvs.height = this.height * scale;     //计算等比缩小后图片宽高
                        var ctx = cvs.getContext(\'2d\');
                        ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
                        var newImageData = cvs.toDataURL(fileType, 0.8);   //重新生成图片，<span style="font-family: Arial, Helvetica, sans-serif;">fileType为用户选择的图片类型</span>
                        var sendData = newImageData;

                        if (sendData.length > 3072000) {
                            faphoto.find(\'.thumb .img span .icon-load\').parent().parent().parent().remove();
                            showMsg($frm, \'您这张"\' + _file.name + \'"图片大小过大，应小于3M.\');
                            return false;
                        }
                        uploadCanvasImg(sendData, imgOrientation, $frm, arrUrl, newUrl, imgUrlsInput, list, faphoto);
                    }
                }

            }
        });
    }


    function uploadCanvasImg(imgData, imgOrientation, objDatafrm, arrUrl, newUrl, imgUrlsInput, list, faphoto) {
        var $frm = objDatafrm;
        var params = {
            \'imgData\': imgData,
            \'imgOrientation\': imgOrientation,
        };
        $.ajax({
            url: "http://9night.kimiss.com/m/?c=Mobile_Thread&a=CanvasUpload"
            , data: params
            , type: \'post\'
            , dataType: \'json\'
            , beforeSend: function(xhr) {
                // 上传监听 upload
//                xhr.getNativeXhr().upload.addEventListener(\'progress\', function(ev) {
//                    S.log({\'loaded\': ev.loaded, \'total\': ev.total});
//                });
            }
            , success: function(data) {
                $(\'.btnSubmit\').removeAttr(\'disabled\');
                if (!data.ok) {
                    clearMsg($frm);
                    showMsg($frm, data.msg);
                    // 移除旋转的块
                    faphoto.find(\'.thumb .img span .icon-load\').parent().parent().parent().remove();
                    return false;
                }
                newUrl = data.msg.il;
                arrUrl.push(newUrl);
                imgUrlsInput.val(arrUrl.join(\',\'));
                list = \'<img class="success" style="-webkit-transform-origin: 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"\';
                list += \'src="\' + newUrl + \'" xwidth="300" xheight="330">\';
                faphoto.find(\'.thumb .img span .icon-load\').parent().last().html(list);

                var imgUrlsNum = imgUrlsInput.val().split(\',\').length;

                // 记录Offline中
                if ($(\'#mianImgUrls\').val())
                    S.Offline.setItem(imgs_data_offline_key, $(\'#mianImgUrls\').val(), 24 * 60 * 60 * 1000);

                if (imgUrlsNum == 8) {
                    $(\'.opt\').hide();
                } else {
                    $(\'.opt\').show();
                }
            }
        });

    }