么也不说了
么也不说了
  • 发布:2018-10-16 21:52
  • 更新:2019-10-16 21:18
  • 阅读:1789

【报Bug】WKwebview模式下cropper裁剪插件无法使用,会卡死

分类:HBuilder

详细问题描述(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

2018-10-16 21:52 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

如果canvas使用网络图像遇到跨域问题,需要服务端设置图像的响应头:Access-Control-Allow-Origin
如果canvas使用本地图像遇到跨域问题,可以使用plus接口将图像转换为base64再使用,相关插件:https://ext.dcloud.net.cn/plugin?id=123

  • 守护

    5+app 不能使用https://ext.dcloud.net.cn/plugin?id=123这个插件,如何改写canvas.toDataURL方法?

    plus的哪个接口可以将canvas图像转换为base64?

    2020-02-20 14:06

该问题目前已经被锁定, 无法添加新回复