由于在微信小程序環(huán)境下面沒法獲取dom，很多方法都很難去實(shí)現(xiàn)保存html結(jié)構(gòu)的頁面，比較有效的#painter 可以不需要操作dom，但是那玩意兒和重新用js寫個頁面一樣，簡單的頁面還好，復(fù)雜的，元素比較多的就很麻煩，所以考慮用webview+html2canvas來完成
先說一下思路，既然在微信小程序環(huán)境下行不通，那就考慮換個環(huán)境，用webview加載頁面，再通過html2canvas來生成相應(yīng)的canvas，然后轉(zhuǎn)成圖片。
首先是webview，不懂的可以去看下官方文檔，貼在這里：https://uniapp.dcloud.net.cn/component/web-view.html#web-view。也就是在小程序或者app環(huán)境中掛載一個ifram，小程序加載這個頁面必須放到服務(wù)器上，其他像app的可以放在本地。文章來源：http://www.zghlxwxcb.cn/news/detail-504659.html
貼代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-504659.html
//小程序端
<web-view :src="webUrl" @message="handleMessage"></web-view>
//webUrl -->頁面路徑 handleMessage-->頁面像服務(wù)器通信的方法
<script>
export default{
? methods:{
? ? //
saveImageToPhotosAlbum(data) {
let base64 = data.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
//就是這里需要獲取微信環(huán)境的保存路徑，所以最好把轉(zhuǎn)好的base64傳到小程序端來下載? ?
? ? ? let filePath = wx.env.USER_DATA_PATH + '/detail.png';
uni.getFileSystemManager().writeFile({
filePath: filePath, //創(chuàng)建一個臨時文件名
data: base64, //寫入的文本或二進(jìn)制數(shù)據(jù)
encoding: 'base64', //寫入當(dāng)前文件的字符編碼
success: res => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function (res2) {
uni.showToast({
title: '保存成功，請從相冊選擇再分享',
icon: "none",
duration: 5000
})
},
fail: function (err) {
// console.log(err.errMsg);
}
})
},
fail: err => {
//console.log(err)
}
})
},
? ? ?//接收來自webview的數(shù)據(jù)，注意，這里detail.data是一個數(shù)組！
? ? ?handleMessage(res) {
this.saveImageToPhotosAlbum(res.detail.data[0].imgData)
?},
? ? }
? }
</script>//webview頁面端 我用的是html，你也可以用vue，或者其他的什么框架，但是一定要在服務(wù)器上。本地的話就開一個nginx服務(wù)調(diào)試就好。
//這個html是在uniapp webview copy的模板，里面對各種環(huán)境都做了處理，所以我們直接在另一個script里面寫邏輯就好了。
//引入在線的vue，css，最重要的是這個：https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js ，引入之后允許我們使用uni的部分api。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>保存html</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" >
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div class="main-box" :style="{'--uni':uni, 'background': '#FAFAFA url(' + baseUrl + '/img/chuxian_bg.png) no-repeat', 'background-size': '100%' }">
<div class="order-num">
訂單編號：{{ dataObj.orderNumber }}
</div>
<div class="order-title">
<h1>車輛出險報告</h1>
<h3>{{ dataObj.model }}</h3>
</div>
<div class="save">
<button @click="savePicture">保存本頁</button>
</div>
</div>
<div id="downimg" v-show="false"></div>
</div>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付寶小程序的 JS-SDK 防止 404 需要動態(tài)加載，如果不需要兼容支付寶小程序，則無需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write(
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
);
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，則無需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 頭條小程序 JS-SDK 如果不需要兼容頭條小程序，則無需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，則無需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
);
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
</script>
<!-- uni 的 SDK -->
<!-- 需要把 uni.webview.1.5.4.js 下載到自己的服務(wù)器 -->
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script type="text/javascript">
Vue.use(httpVueLoader)
new Vue({
el: '#app',
data: {
dataObj: {},
baseUrl: 'https://xxx:8443',
},
created () {
this.dataObj = JSON.parse(this.getQueryString('data'))
this.dataObj.result = JSON.parse(this.dataObj.result)
console.log(document.documentElement.clientWidth)
this.uni = 750 / document.documentElement.clientWidth
console.log(this.uni)
},
methods: {
getQueryString (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]); return null;
},
plusXing (str, frontLen, endLen, cha) {
let len = str.length - frontLen - endLen;
let xing = "";
for (let i = 0; i < len; i++) {
xing += cha;
}
return (
str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
);
},
? ? //這里是重點(diǎn)，獲取想要保存的html結(jié)構(gòu)，然后設(shè)置相應(yīng)的樣式，
savePicture () {
let canvas2 = document.createElement('canvas'), // 創(chuàng)建canvas
_canvas = document.querySelector('.main-box'), //此處可換body，或div等 我們一般可以放繪制的元素
w = parseInt(window.getComputedStyle(_canvas).width),
h = parseInt(window.getComputedStyle(_canvas).height);
//將canvas畫布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + 'px';
canvas2.style.height = h + 'px';
let context = canvas2.getContext('2d'),
rect = $('.main-box').get(0).getBoundingClientRect(); //獲取元素相對于視察的偏移量
context.scale(2, 2);
context.translate(-rect.left, -rect.top); //設(shè)置context位置，值為相對于視窗的偏移量負(fù)值，讓圖片復(fù)位
html2canvas(document.querySelector('.main-box'), {
canvas: canvas2,
useCORS: true, // 允許圖片跨域
width: 584, // 繪制圖片的寬 2倍
dpi: window.devicePixelRatio * 2, // dpi 如果模糊的話 就把dpi和scale縮放的值調(diào)大 dpi越高生成的圖片越大
height: 1188 // 繪制圖片的高 2倍
}).then(function (canvas) {
var url = canvas.toDataURL() //把canvas轉(zhuǎn)成base64
uni.postMessage({
data: {
imgData: base64, // 剛才拿到的base64 數(shù)據(jù)
},
});
});
}
},
})
</script>
</body>
</html>
到了這里，關(guān)于uni-app 微信小程序 保存當(dāng)前頁面為圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
