当前位置：个人在线分享 > 跨平台应用开发进阶(五十三)：uni-app 通过webview方式嵌套H5实现图片点击下载_h5嵌入app中怎么实现下载功能

跨平台应用开发进阶(五十三)：uni-app 通过webview方式嵌套H5实现图片点击下载_h5嵌入app中怎么实现下载功能

作者 : admin 本文共635个字，预计阅读时间需要2分钟发布时间： 2024-06-9 共1人阅读

signShare() {

this.toImage();
},
toImage() {

Toast.loading();
const node = this.$refs.luckyInfo;
htmlToImage(node, 2).then(img => {

this.shareObject.image = img;
// launchSharePanelPic(this.shareObject);
// 展示海报
this.showPicNewyear(this.shareObject.image, this.shareObject.title);
// this.goPage();
Toast.hide();
}).catch(err => {

console.log(err);
Toast.hide();
})
},


其中，`htmlToImage`为利用`html2canvas`方法将页面`html`转换为`base64`。

// 利用html2canvas将页面html转换为base64
export function htmlToImage(node, ratio = 16/9) {

// 获取像素比
const scale = getDPR();
let canvasOptions = document.createElement(“canvas”);
canvasOptions.width = window.innerWidth * scale;
canvasOptions.height = window.innerWidth * ratio * scale

uni-app