cropper设置裁剪不等比例

裁剪完成后，cropper有一个方法可以生成裁剪后的图片代码：

();

该方法可以返回一个裁剪后的canvas元素。

生成base64格式的图片：

var base64  ().toDataURL('image/jpeg');

也可以生成blob格式的图片：

var blob  ().toBlob(function(blob){
    // 处理blob对象
}, 'image/jpeg', 0.8);

首先我们使用的是base64格式将图片传递到后台。但在网络慢的情况下，直接使用上述方法生成blob对象可能会出现问题，因为生成的blob对象没有文件名，需要手动给它赋值。

解决方法：

var fileName  '';
var blob  ().toBlob(function(blob){
    // 处理blob对象
}, 'image/jpeg', 0.8);
// 创建File对象
var file  new File([blob], fileName, {type: blob.type});

将生成的File对象传递给后台。

在传递给后台之前，可能会遇到一些问题：

1. 图片大小过大，无法上传。
2. 图片质量降低，导致显示效果不佳。

解决方法：

var quality  0.8; // 图片质量，取值范围为0到1
var fileName  '';
var blob  ().toBlob(function(blob){
    // 处理blob对象
}, 'image/jpeg', quality);
// 创建File对象
var file  new File([blob], fileName, {type: blob.type});

通过指定图片质量来控制文件大小与显示效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。