一.app屏幕长截屏：
1.1 需求是
1.1.1 生成报告后进行长截屏
①下载安装html2canvas
npm i html2canvas
② 引入html2canvas
③renderjs 是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。
renderjs的主要作用有2个：
大幅降低逻辑层和视图层的通讯损耗，提供 高性能 视图交互能力
在视图层操作dom，运行for web的js库。
④html2canvas生成的是base64需要转换成临时文件需要用到base64ToPath方法
⑤使用uni.uploadFile 上传图片
⑥获取图片链接后传给后端
1.1.2 另外补充一下截屏必须要点击按钮才能触发，但我们可以通过双向定时器来优化这个 问题
1.2 代码实例
//注：引入html2canvas
//注：renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。
//renderjs的主要作用有2个：
//大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
//在视图层操作dom，运行for web的js库
//renderjs只能在app端和h5端使用注意。
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
data() {
return {}
},
mounted() {
setTimeout(() => {
console.log("laile==1111122221=")
this.html2canvas.emitData()
}, 2000);
},
methods: {
emitData() {
// 根据自己需要截图区域
console.log("laile==1111122221=")
this.create('contractimage');
},
async create(id) {
try {
const timeout = setTimeout(async () => {
const domId = document.getElementById(id);
html2canvas(domId, {
width: domId.offsetWidth, //dom 原始宽度 生成画布的宽度
height: domId.offsetHeight, //生成画布的高度
useCORS: false, //默认false,是否尝试使用CORS从服务器加载映像
allowTaint: true,
scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
}).then((canvas) => {
this.$ownerInstance.callMethod('renderFinish', canvas.toDataURL(
"image/png"))
}).catch(err => {
console.log('!!!!2', err)
});
clearTimeout(timeout);
}, 200);
} catch (error) {
console.log(error)
}
}
}
}
</script>
metouds:{
//注：html2canvas生成的是base64需要转换成临时文件需要用到base64ToPath方法
renderFinish(opt) {
this.reportimg = ''
//判断后台是否获取到数据，未获取的话停止执行
if (!this.storeInfoReport.id) {
this.getCloses();
return
};
this.saveBase64Img(opt);
},
saveBase64Img(base64Data) {
base64ToPath(base64Data).then(path => {
console.log("开始保存图片 ", path)
this.doUploadFile(path)
}).catch(error => {
uni.hideLoading()
uni.showToast({
title: '图片生成出错了',
icon: 'none'
})
console.error('临时路径转换出错了：', error, JSON.stringify(error));
});
},
//使用uni.uploadFile 上传图片
doUploadFile(path) {
let that = this;
that.reportimg = ''
let url = myconfig.upload_img_url
const uploadTask = uni.uploadFile({
url: url,
filePath: path,
name: 'file',
fileType: 'image',
formData: {},
header: {
'X-Access-Token': uni.getStorageSync('token') || '',
},
success: (uploadFileRes) => {
let dataJSON = JSON.parse(uploadFileRes.data)
console.log("dataJSON", dataJSON);
if (dataJSON.code == 0 && dataJSON.success) {
that.reportimg = dataJSON.message;
if (that.reportimg) {
this.doEdit();
}
} else {
console.log("dataJSON.data", dataJSON);
}
},
fail: function() {
uni.showToast({
title: '分析报告图片上传失败',
icon: 'none'
});
}
});
},
doEdit() {
let params = {
reportUrl: this.reportimg,
id: this.storeInfoReport.id || '',
};
this.$api.putAction('/dpReport/dpReport/edit', params).then(res => {
if (res.success) {
console.log('已收藏');
} else {
// this.showLightModel(res.message);
}
this.$refs.loadingRef.visible = false;
})
},
}
//补充： utils/image-tools/index.js 文件下的方法工具
//注：html2canvas生成的是base64需要转换成临时文件需要用到base64ToPath方法工具
export function base64ToPath(base64) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
base64 = base64.split(',')
var type = base64[0].match(/:(.*?);/)[1] //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
var str = atob(base64[1])
var n = str.length
var array = new Uint8Array(n)
while (n--) {
array[n] = str.charCodeAt(n)
}
console.log("来了1===》", array, "type=", type)
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], {
type: type
}))) //使用Blob对象创建一个文件
}
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
if (extName) {
extName = extName[1]
} else {
reject(new Error('base64 error'))
}
var fileName = getNewFileId() + '.' + extName
if (typeof plus === 'object') {
var basePath = '_doc'
var dirPath = 'uniapp_temp'
var filePath = basePath + '/' + dirPath + '/' + fileName
console.log("来了2===》", array, "type=", "filePat====>", filePath)
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime
.innerVersion)) {
// plus.io.resolveLocalFileSystemURL 是一个在 uni-app 中使用的 API，用于获取本地文件的 Entry 对象。
// 这个 API 通常用于处理文件系统的路径解析，以便对文件进行操作。
// 以下是一个简单的示例，展示如何使用 plus.io.resolveLocalFileSystemURL 来获取并操作本地文件
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
entry.getDirectory(dirPath, {
create: true,
exclusive: false,
}, function(entry) {
entry.getFile(fileName, {
create: true,
exclusive: false,
}, function(entry) {
entry.createWriter(function(writer) {
writer.onwrite = function() {
console.log("来了2===》")
resolve(filePath)
}
writer.onerror = reject
writer.seek(0)
writer.writeAsBinary(dataUrlToBase64(base64))
}, reject)
}, reject)
}, reject)
}, reject)
return
}
var bitmap = new plus.nativeObj.Bitmap(fileName)
bitmap.loadBase64Data(base64, function() {
bitmap.save(filePath, {}, function() {
bitmap.clear()
console.log("来了3===》")
resolve(filePath)
}, function(error) {
bitmap.clear()
reject(error)
})
}, function(error) {
bitmap.clear()
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
wx.getFileSystemManager().writeFile({
filePath: filePath,
data: dataUrlToBase64(base64),
encoding: 'base64',
success: function() {
console.log("来了4===》")
resolve(filePath)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
