cropper裁剪后图片大小变大等问题

最近根据需求做了一个图片裁剪的功能，于是在Git上找了cropper这个插件，具体api网上有很多资料，大家感兴趣的可以自行查找，这次主要记录下我遇到的问题。

图片裁剪完成后cropper有个方法可以生成裁剪后的图片，这些在前台就可以完成，比后台处理方便很多。

$("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');
        cas.toBlob(function (e) {
            console.log(e);  //生成Blob的图片格式
        })
        console.log(base64url); //生成base64图片的格式
        $('.cavans').html(cas)  //在body显示出canvas元素
    })

$('#image').cropper('getCroppedCanvas', {
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

这里可以生成base64格式，也可以生成blob格式。

首先我使用的是base64格式往后台传，但是，实在是太长了，截个图感受一下

导致网络间传输很慢。那就改用blob格式吧，然鹅，直接用上面的方法生成blob对象不能用，反正就是到处报错，因为生成的blob对象没文件名，需要手动给它赋值，这样：

cas.toBlob(function (e) {
        console.log(e);  //生成Blob的图片格式
        var timestamp = Date.parse(new Date());
        e.name=timestamp+".png";
        parent.previewPic(e,num);
        parent.layer.closeAll();
    })

好了，终于可以传给后台了，结果又出现了另一个问题， è¿éåå¾çæè¿°

what the fuck！我一个1M多的图片裁剪完后变成了十几M，开啥玩笑，然后又上网翻资料，好吧，生成blob对象的时候默认是生成高质量的png，只要在生成的时候指定一下格式就行了，toBlob方法有三个参数，第二个就是图片格式了， è¿éåå¾çæè¿°

cas.toBlob(function (e) {
        console.log(e);  //生成Blob的图片格式
        var timestamp = Date.parse(new Date());
        e.name=timestamp+".jpeg";
        parent.previewPic(e,num);
        parent.layer.closeAll();
    },'image/jpeg')

换成JPEG格式的就没问题了。

ps:前台只要不是换了新页面，那么全局参数在父页面子页面都可以修改或者调用，这个属性可以解决很多问题！

补充：

话说IE不支持toBlob()方法，所以IE下需要下一个js插件，具体忘了是啥，周一再更，今天下班了。

cropper裁剪后图片大小变大等问题

补充：

猜你喜欢