手机端保存失败,电脑保存正常!html2canvas转其中有base64图片太大在手机端就出问题了。。。
在做灵动岛截图工具时候,因为本身是纯前端写的,传的截图作为背景,也是base64,导致html2canvas将这个id下面生成出的base64图片地址就更大了。
电脑下载保存没啥问题,手机就不行了,一直保存失败,app还会闪退。
既然有BUG,就要改进,记录下。。。
目的就是为了让字符串变少,所以我将上传的截图从base64转换成Blob
function uploadAndConvertImage() {
var input = document.getElementById('imageUpload');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var arrayBuffer = e.target.result;
var file = input.files[0];
var type = file.type; // 获取文件的MIME类型
var blob = new Blob([arrayBuffer], { type: type }); // 使用文件的MIME类型创建Blob对象
var url = URL.createObjectURL(blob);
var innerElement = document.querySelector('.inner');
innerElement.style.backgroundImage = 'url(' + url + ')';
// 当背景图像不再需要时,释放blob URL
innerElement.addEventListener('load', function() {
URL.revokeObjectURL(url);
});
};
reader.readAsArrayBuffer(input.files[0]);
} else {
layer.open({
content: "<p class='guanggao'>请先上传截图~</p>"
});
}
}
这样,就解决了手机端html2canvas转html图片,无法下载保存的问题了。
本文出自 俞凌龙博客,转载时请注明出处及相应链接。
本文永久链接: https://blog.jlwz.cn/394