Uniapp 截图 适用于APP
生活随笔
收集整理的這篇文章主要介紹了
Uniapp 截图 适用于APP
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<template> <view class="content"> <view class="nav-top">1.讓朋友的手機(jī)掃描下面的二維碼即可安裝</view> <view class="main"> <view class="lay1"><view class="line"></view></view> <view class="lay2"> <view class="qr"> <view class="qr-img"> <image src="../../static/logo.png" style="height: 200upx;width: 200upx;" ></image> </view> <view class="qr-txt">掃描二維碼下載安裝包</view> </view> </view> <view class="lay3"><view class="line"></view></view> </view> <view class="code-btn"> <view class="line-btn"><view class="btn" @tap="capture()">點(diǎn)擊保存至手機(jī)相冊(cè)</view></view> </view> </view>
</template> <script> export default{ methods: { capture() { var pages = getCurrentPages(); var page = pages[pages.length - 1]; console.log("當(dāng)前頁(yè)"+pages.length-1);var bitmap=null; var currentWebview = page.$getAppWebview();bitmap = new plus.nativeObj.Bitmap('amway_img'); // 將webview內(nèi)容繪制到Bitmap對(duì)象中 currentWebview.draw(bitmap,function(){ console.log('截屏繪制圖片成功'); bitmap.save( "_doc/a.jpg" ,{} ,function(i){ console.log('保存圖片成功：'+JSON.stringify(i)); uni.saveImageToPhotosAlbum({ filePath: i.target, success: function () { bitmap.clear(); //銷毀Bitmap圖片 uni.showToast({ title: '保存圖片成功', mask: false, duration: 1500 }); } }); } ,function(e){ console.log('保存圖片失敗：'+JSON.stringify(e)); }); },function(e){ console.log('截屏繪制圖片失敗：'+JSON.stringify(e)); }); //currentWebview.append(amway_bit); } }, } </script> <style>
page { background-color: #2d355c;
}
.content {
}
.nav-top { color: #ffffff; font-size: 35upx; text-align: center; margin: 20upx 0;
}
.main { position: relative; width: 100%; margin-top: 50upx;
}
.main .lay1 { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 3000;
}
.main .lay1 .line { height: 100upx; width: 100%; border-radius: 50px; background-color: #e28f0b; margin-top: 100upx;
}
.lay2 { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 4000;
}
.lay2 .qr { width: 70%; margin: 0 auto; height: 700upx; background-color: #3958ab;
}
.qr-img { text-align: center; padding-top: 50%;
}
.qr-txt { color: #ffffff; text-align: center; margin-top: 50upx;
}
.lay3 { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 4000; text-align: center;
}
.lay3 .line { height: 100upx; width: 85%; border-radius: 50px; background-color: #e28f0b; margin: 40upx auto; box-shadow: #cccccc 0px 3px 10px;
}
.code-btn { width: 100%; color: #ffffff; height: 100%; text-align: center;
}
.line-btn { position: absolute; bottom: 200upx; left: 0upx; right: 0upx; width: 100%; display: flex; justify-content: center;
}
.btn { width: 400upx; padding: 35upx; background-color: #e28f0b; border-radius: 50px;
}
.btn:active{ background-color: #FEC607;
}
</style>
總結(jié)
以上是生活随笔為你收集整理的Uniapp 截图 适用于APP的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于模型设计（MBD）工程方法开发六轴机
- 下一篇： 我国物联网前景可期 作为核心的传感器却将