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

【报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

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