legend3---图片裁剪实例代码

legend3---图片裁剪实例代码

一、总结

一句话总结：

图片裁剪之后，图片尽量存为jpg，相比于png，jpg的图片要小很多

1、base64格式图片如何存储为jpg，如何存储为png？

存储为jpg就是canvas转base64的时候格式选jpeg，存png就是转的时候格式选png，转jpg例子：base64 = cas.toDataURL('image/jpeg'); // 转换为base64

var cas = $('#image_clip').cropper('getCroppedCanvas', {
    width : 150,
    height : 150
});// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
var data = encodeURIComponent(base64);//作为URI编码

2、base64转png或者jpg时候，Data URL scheme 支持的类型有哪些？

常见的图片类型都支持，比如gif、png、jpeg等等，也就是可以把base64格式的数据转换为这些类型

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

3、如何将base64图片转换为jpg图片？

和Data URL scheme相关，获取base64数据的时候选择jpeg方式：var base64 = cas.toDataURL('image/jpeg'); // 转换为base64

var cas = $('#image_clip').cropper('getCroppedCanvas', {
    width : 150,
    height : 150
});// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
var data = encodeURIComponent(base64);//作为URI编码

二、图片裁剪实例代码

博客对应课程的视频位置：

前端js代码：

<script>
    function submit_clip_image() {
        //console.log('2222222222');

        var cas = $('#image_clip').cropper('getCroppedCanvas', {
            width : 150,
            height : 150
        });// 获取被裁剪后的canvas
        var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
        var data = encodeURIComponent(base64);//作为URI编码

        //之前的缩略图的图片
        let old_user_img_url=$('#u_picture').val();
        //console.log(old_user_img_url);
        //console.log(data);

        let u_id=window.u_id;

        $.ajax({
            url : "/component/uploader_img_base64",
            type : 'POST',
            data : {'u_id':u_id,'old_user_img_url':old_user_img_url,'base64_img':data},
            success : function(data) {
                if(parseInt(data.valid)==1){
                    $('#u_picture').val(data.message);
                    $('.fry_file_uploader_img').attr({'src':data.message});
                    //让上传图片的框框隐藏
                    $('#fry_clip_user_img_box').hide();
                    //console.log(data.message);
                    layer_alert_success_mobile('头像上传成功！');
                }else{
                    layer_alert_fail_mobile(data.message);
                }
            }
        });
    }
</script>

后端php代码：

//1、上传base64位的图片：用户的头像
public function uploader_img_base64(Request $request){

    //用户id
    $u_id=Auth::guard('user')->user()->id;
    if(!$u_id){
        return ['valid' => 0, 'message' => '用户信息过期，请刷新页面重试！！'];
    }

    $base64_img=$request->input('base64_img');
    $base64_img=urldecode($base64_img);
    //获取原图片的相对路径
    $old_user_img_url=$request->input('old_user_img_url');
    $position=stripos($old_user_img_url,'user_img/');
    if(strlen($old_user_img_url)>$position+9)
    $old_user_img_url_relative=substr($old_user_img_url,$position+9);

    preg_match('/^(data:s*image/(w+);base64,)/',$base64_img,$res);


    if (isset($res[2])) {
        //获取图片类型
        $type = $res[2];
        if($type=='jpeg') $type='jpg';

        //图片保存路径
        $new_file = ''.date('Ym',time()).'/';
        //$new_file = "attachment/user_img/".date('Ymd',time()).'/';

        //图片名字
        $new_file = $new_file.str_random(10).mt_rand(10000,99999).'.'.$type;
        $base64_img=base64_decode(str_replace($res[1],'', $base64_img));
        //dd($base64_img);
        $ans=Storage::disk('user_img')->put($new_file, $base64_img);

        if ($ans) {
            $ans2=Storage::disk('user_img')->delete($old_user_img_url_relative.'');
            //dd($ans2);
            $img_url=asset('attachment/user_img/'.$new_file);
            //$img_url='attachment/user_img/'.$new_file;
            //修改用户的头像
            User::where('id',$u_id)->update(['picture'=>$img_url]);

            //unlink($old_user_img_url_relative.'');
            return ['valid' => 1, 'message' => $img_url];
        } else {
            return ['valid' => 0, 'message' => '上传失败请重试！'];
        }

    }else{
        return ['valid' => 0, 'message' => '上传失败请重试！！'];
    }

}