Jcorp + php 实现截图+上传

以下全部为手写,禁止转帖。
Jcorp是很好用的Jquery 截图插件,兼容chrome firfox。
Demo地址是:http://code.ciaoca.com/jquery/jcrop/demo/
现在用Jcorp + php 实现截图+上传,从上面地址下载 js,css文件引入。如果没有引入css则会出现选框无法移动,无边框等情况。具体参数参考以上网址手册。
我的初始化配置是这样的

function initLogoJcrop(modal){
            //modal为弹层对象,
            modal.find('img.preview').Jcrop({
                //设置画布宽度为568
                boxWidth:568,
                onChange:function(res){
                    //当选框位置改变时记录选框的值(实际尺寸)
                    // 这里时实际尺寸,这里是个坑,页面显示图片和上传图片有可能不是一个尺寸
                    logoChangeLoc = this.tellSelect();
                    widgetSize = this.getBounds();
                    //console.log(widgetSize);
                    //console.log(logoChangeLoc);
                }
            },function(){
                jcrop_api = this;
                jcrop_api.animateTo([0,0,568,0]);
                jcrop_api.setOptions({ aspectRatio: 1/1 });
                jcrop_api.setOptions({ allowSelect: true });
                jcrop_api.setOptions({ allowMove: true });
                jcrop_api.setOptions({ allowResize: true });
                jcrop_api.setOptions({ trackDocument: false });
            });
        }

具体参数查看手册,这里就不介绍了。当实例化完插件后,当触发事件后,把图片和截取图片当位置,图片尺寸信息通过ajax上传服务器。参数代码如下:

            //验证完图片格式后,把参数都放到formdata中,widgetSize为数组,传到服务器应该是字符串,后端注意转化,file为input.val();
            var formData = new FormData();
            formData.append('widgetSize',widgetSize);
            formData.append('file','');
            formData.append('imgSize',logoChangeLoc);

以下是php处理代码,这里我不用类库了,直接php原生写给大家看。代码如下:

          //判断图片格式
          //获取参数
          //移动图片到目录
          move_uploaded_file($tmp,$filePath.$imgname);
          imggdAction($filePath.$imgname,$filePath,json_decode($size,true),$widgetSize);  //$size为截取图片的尺寸位置信息,widgetSize为图片真实尺寸
 function imggdAction($path,$filePath,$size,$widgetSize){
        $widgetSize = explode(',',$widgetSize);
        $sizeInfo = getimagesize($path);  //获取图片信息
        $imgWidth = $widgetSize[0];
        $imgHeight = $widgetSize[1];
        $mime = $sizeInfo['mime']; //类型
        $fileextArray = explode('/',$mime);
        $fileext = $fileextArray[1];  //图片后缀
        $ext2functions = array(
            'jpg'  => 'imagecreatefromjpeg',
            'jpeg' => 'imagecreatefromjpeg',
            'png'  => 'imagecreatefrompng',
            'gif'  => 'imagecreatefromgif'
        );
        //获取图片资源
        $currentImg = call_user_func($ext2functions[$fileext], $path);

        //缩略图真图
        $dest_img = imagecreatetruecolor($imgWidth,$imgHeight);
        //生成缩略图
        imagecopyresampled($dest_img, $currentImg, 0, 0, 0, 0, $imgWidth, $imgHeight, $imgWidth, $imgHeight);
        unlink($path); //删除原图
        imagedestroy($currentImg); //销毁原图
        // 调整默认颜色
        $color = imagecolorallocate($dest_img, 255, 255, 255);
        imagefill($dest_img, 0, 0, $color);
        $imgname = time().rand(100,999).'.jpeg';
        //imagejpeg($dest_img,$filePath.$imgname,100);
        //裁剪
        //x:左上角x坐标,y:左上角y坐标,x2:右下角横坐标,y2:右下角纵坐标,w截取图片宽,h截取图片高
        //生成截图真图
        $dest_img1 = imagecreatetruecolor($size['w'],$size['h']);
        //imagecopyresampled($dest_img, $currentImg, 0, 0, $x, $y, $width, $height, $w, $h);
        imagecopyresampled($dest_img1, $dest_img, 0, 0, $size['x'], $size['y'], $size['w'], $size['h'], $size['w'], $size['h']);
        $color = imagecolorallocate($dest_img1, 255, 255, 255);
        imagefill($dest_img1, 0, 0, $color);
        imagedestroy($dest_img); //销毁缩略图真图
        $imgname = time().rand(100,999).'.jpeg';
        imagejpeg($dest_img1,$filePath.$imgname,100);
        imagedestroy($dest_img1); //截图真图
        return $filePath.$imgname;
    }

你可能感兴趣的:(Jcorp + php 实现截图+上传)