详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)
[内容]
使用cropper裁剪图片时会卡死报错
[ERROR] : Script error.
filename:
lineno:0
cropper版本:Cropper.js v1.4.0
重现步骤
[步骤]
[结果]
[期望]
[如果语言难以表述清晰,可以拍一个视频或截图,有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX]
[IDE版本号]HBuilder 9.1.25.201810101806
[windows版本号]1809
[mac版本号]
App运行环境说明
[Android版本号]
[iOS版本号]ios12.0.1
[手机型号]所有iPhone在该模式下均有问题
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[安装包]
document.getElementById('button').addEventListener('tap', function() {
var croppedCanvas;
var roundedCanvas;
if(!croppable) {
return;
}
// Crop
croppedCanvas = cropper.getCroppedCanvas();
// Round
roundedCanvas = getRoundedCanvas(croppedCanvas);
// Show
var base64url = roundedCanvas.toDataURL("image/jpeg", 1);
src = roundedCanvas.toDataURL("image/jpeg", getCompressRate(1, showSize(base64url)));
plus.storage.setItem("touxiang", src);
mui.back()
})
function getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = sourceCanvas.width;
var height = sourceCanvas.height;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
}
function showSize(base64url) {
//获取base64图片大小,返回MB数字
var str = base64url.replace('data:image/png;base64,', '');
var equalIndex = str.indexOf('=');
if(str.indexOf('=') > 0) {
str = str.substring(0, equalIndex);
}
var strLength = str.length;
var fileLength = parseInt(strLength - (strLength / 8) * 2);
// 由字节转换为MB
var size = "";
size = (fileLength / (1024 * 1024)).toFixed(2);
var sizeStr = size + ""; //转成字符串
var index = sizeStr.indexOf("."); //获取小数点处的索引
var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
if(dou == "00") { //判断后两位是否为00,如果是则删除00
return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
}
return parseInt(size);
}
function getCompressRate(allowMaxSize, fileSize) { //计算压缩比率,size单位为MB
var compressRate = 1;
if(fileSize / allowMaxSize > 4) {
compressRate = 0.01;
} else if(fileSize / allowMaxSize > 3) {
compressRate = 0.03;
} else if(fileSize / allowMaxSize > 2) {
compressRate = 0.05;
} else if(fileSize > allowMaxSize) {
compressRate = 0.08;
} else {
compressRate = 0.1;
}
return compressRate;
}
联系方式
[QQ]302935850
守护
5+app 不能使用https://ext.dcloud.net.cn/plugin?id=123这个插件,如何改写canvas.toDataURL方法?
plus的哪个接口可以将canvas图像转换为base64?
2020-02-20 14:06