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;        
        KIFImage::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(/MIs1S/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();
                }
            }
        });

    }