HTML5Plus 構(gòu)建 APP 的截圖保存功能

謝 DCloud 社區(qū)原作者（1091656813@qq.com：http://ask.dcloud.net.cn/article/13494），本人做了一點(diǎn)代碼精簡(jiǎn)。

簡(jiǎn)單說(shuō)下 HTML5Plus，與 Cordova（含 ionic）類似，是 js 寫了中間層協(xié)議，使得打包在 APP 中的 webview 組件可以通過(guò)暴露出來(lái)的 api 接口調(diào)用原生的能力，比如頁(yè)面棧控制，拍照等等。
適用于快速原型開(kāi)發(fā) APP，性能要求不是那么高的 APP 開(kāi)發(fā)（90% 的 APP 性能要求都是夠的）。
優(yōu)點(diǎn)：超級(jí)簡(jiǎn)單，是個(gè)前端就能做 APP，這一條就夠了！
缺點(diǎn)：1. 依賴自家 IDE，之前是 HBuilder，現(xiàn)在推新版 HBuilderX（Vue 官網(wǎng)也投放了廣告）；2. 社區(qū)環(huán)境差，非大廠不開(kāi)源基本都這樣（好在自家迭代還算迅速）；3. 自家 UI 框架用的還是 iOS 樣式，萬(wàn)年更新一次……
對(duì)了，附帶一個(gè)小 tip：iOS 上架的 APP 必須有調(diào)用 iOS 系統(tǒng)接口的操作（哪怕僅僅是陀螺儀），否則被拒。Android 同樣建議如此。

牽扯功能

BitMap 對(duì)象截屏
在 BitMap 對(duì)象截屏回調(diào)中保存到相冊(cè)（需要同意授權(quán)）

Show Me Code

// 默認(rèn)截屏全屏
const obj = {
 top: '0px',
 left: '0px',
 width: '100%',
 height: '100%'
}
// 動(dòng)態(tài)獲取時(shí)間作為文明標(biāo)識(shí)
function getDateStr() {
 return String(Date.parse(new Date()));
}
/**
 * @params {function} successCB 必填的成功回調(diào)
 * @params {function} errorCB 失敗回調(diào)
 * @params {string} fileName 文件名
 * @params {string} imgID 圖片 id
 * @params {boolean} overwrite 是否覆蓋已有文件
 * @params {string} format 格式
 * @params {number} quality 成圖質(zhì)量
 * @params {object} clip 截屏區(qū)域
 */
function save(successCB, errorCB = () => {}, fileName = getDateStr(), imgID = getDateStr(),
 overwrite = true, format = 'png', quality = 50, clip = obj) {
 const cw = plus.webview.currentWebview();
 const bitmap = new plus.nativeObj.Bitmap(imgID);
 //繪制截圖
 cw.draw(bitmap, function() {
 // 保存Bitmap圖片
 bitmap.save('_doc/' + fileName + '.' + format, {
 overwrite,
 format,
 quality,
 clip
 }, function(i) {
 //保存到系統(tǒng)相冊(cè)
 plus.gallery.save(i.target, function(details) {
 //銷毀Bitmap圖片
 bitmap.clear();
 successCB({
 success: 'success',
 details,
 });
 }, function(e) {
 //銷毀Bitmap圖片
 bitmap.clear();
 errorCB({
 error: '圖片保存至相冊(cè)失敗',
 details: e
 });
 });
 }, function(e) {
 bitmap.clear();
 errorCB({
 error: '圖片保存失敗',
 details: e
 });
 });
 }, function(e) {
 errorCB({
 error: '截屏繪制失敗',
 details: e
 });
 });
}
// 調(diào)用保存
function clickSave() {
 save(function() {
 alert('保存成功，請(qǐng)前往相冊(cè)分享');
 })
}

都已經(jīng)在注釋里面，拿來(lái)即用。

建議接觸 HTML5Plus 的同學(xué)保存一份，以備不時(shí)之需。

這個(gè)是這兩天遇到的小 tip，希望幫到你。謝謝。

者：日照工校/徐鵬

手機(jī)瀏覽器能用來(lái)干什么？看資訊、看圖片、看小說(shuō)、看視頻等等。作為上網(wǎng)必備工具，手機(jī)瀏覽器對(duì)于網(wǎng)絡(luò)體驗(yàn)的影響不可忽視。隨著網(wǎng)絡(luò)的快速發(fā)展，大家對(duì)于瀏覽器的要求也越來(lái)越高，比如支持HTML5頁(yè)面版。由于手機(jī)瀏覽器的內(nèi)核和性能存在差異，造成不同的HTML5頁(yè)面瀏覽有不同的體驗(yàn)。

近日無(wú)意中看到一個(gè)款800手機(jī)瀏覽器，在體驗(yàn)過(guò)程中，發(fā)現(xiàn)不論是在游戲體驗(yàn)還是軟件特效上，都完全體現(xiàn)HTML5效果，為了讓大家有更直觀的感受，就先試用了一番。

小知識(shí)：

HTML5名詞解釋：原生支持多媒體功能，不再依賴瀏覽器插件（例如 Adobe Flash player， Windows Media Player），便可實(shí)現(xiàn)跨平臺(tái)在線影音播放。同時(shí) HTML5 還可以讓網(wǎng)頁(yè)調(diào)用手機(jī)的應(yīng)用數(shù)據(jù)從而實(shí)現(xiàn)很酷的功能。另外，HTML5 新增了離線存儲(chǔ)，一次聯(lián)網(wǎng)加載資源，長(zhǎng)久離線訪問(wèn)。廣義的 HTML5 技術(shù)還包括 CSS3，JavaScript 以及支持 SVG 等。

在試用過(guò)程中，首先引起筆者注意的，還是800手機(jī)瀏覽器的界面化，所謂細(xì)節(jié)決定產(chǎn)品的成敗，先來(lái)看看它的到底是什么樣子。

800手機(jī)瀏覽器啟動(dòng)后，從整體上看到的，就是集成了常用的搜索引擎和常用網(wǎng)站，而且還可以添加新的常用頁(yè)面。

跑分測(cè)試

800手機(jī)瀏覽器主要是面向智能手機(jī)的安卓瀏覽器，全面支持 HTML5。但是如果要成為一款真正的支持HTML5的手機(jī)瀏覽器，僅有支持還是不夠的，更多的需要完全與HTML5的融合，還是先看看它的跑分結(jié)果吧：

注：測(cè)試網(wǎng)站Html5test.com，它是一個(gè)非常具有權(quán)威性的測(cè)試HTML5性能的網(wǎng)站，無(wú)論是PC端還是手機(jī)端的瀏覽器，都能夠快速檢測(cè)出當(dāng)前瀏覽器對(duì)HTML5頁(yè)面各項(xiàng)元素對(duì)于HMTL5的支持情況。

在HTML5 測(cè)試中，800手機(jī)瀏覽器得分高達(dá)驚人466分，800手機(jī)瀏覽器的得分完全可以媲美PC端瀏覽器的表現(xiàn)，這也大大提升了它對(duì)HTML5特效效果以及游戲的支持。

跑分測(cè)試結(jié)果已經(jīng)可以說(shuō)明一個(gè)很重要的方面，當(dāng)然除這些數(shù)據(jù)外，本身具有HTML5的特性也是非常重要的，800手機(jī)瀏覽器還給我們很多HTML5體驗(yàn)，展現(xiàn)了一種對(duì)于HMTL5的一種融合以及更深的理解。

視頻播放

提起HTML5，很多人都會(huì)想到視頻播放。因?yàn)樗耆恍枰魏蔚牟寮С郑灰菫g覽器支持即可，目前主流的視頻網(wǎng)站都早已經(jīng)實(shí)現(xiàn)，他們完全支持HTML5的視頻直接播放。目前雖然還支持Flash插件，但是它會(huì)大大的增加電量消耗和性能的損耗，同時(shí)Adobe公司也宣布會(huì)停止Flash在手機(jī)端的更新。

現(xiàn)在，來(lái)看看800手機(jī)瀏覽器對(duì)于視頻的表現(xiàn)：

HTML5視頻體驗(yàn)網(wǎng)站截圖

逼真的靈動(dòng)效果，完全沒(méi)有卡頓的現(xiàn)象

800手機(jī)瀏覽器在播放過(guò)程中沒(méi)有出現(xiàn)視頻失真或者不流暢的情況。

CCS3特性

除此之外，800手機(jī)瀏覽器還展示了幾種HTML5獨(dú)有特性，比較代表性的有CSS特性等。

CCS3是CSS語(yǔ)言的新版，也是一個(gè)全新時(shí)代的技術(shù)，它可以給你的圖片添加圓角，可以讓你的圖片具有陰影特效，還可以打造一個(gè)矢量圖的效果。

游戲體驗(yàn)

800手機(jī)瀏覽器不僅僅帶來(lái)了一些軟件上的體驗(yàn)，還給我們的帶來(lái)了很多游戲上的體驗(yàn)，來(lái)看看800手機(jī)瀏覽器的游戲效果如何吧。

這款游戲?qū)儆谝粋€(gè)網(wǎng)絡(luò)游戲，支持觸摸反饋，在試玩過(guò)程中，游戲的流暢度和直接下載游戲沒(méi)有太大的差別。

總結(jié)：

800手機(jī)瀏覽器在HMTL5上表現(xiàn)無(wú)懈可擊，給我留下很深刻的印象。它不僅僅表現(xiàn)在跑分測(cè)試數(shù)據(jù)上，更多的是表現(xiàn)在對(duì)于HTML5的融合上，是一款真正的HTML5瀏覽器。

瓜播放器對(duì)于手機(jī)的適配上做的不錯(cuò)。西瓜播放器是字節(jié)跳動(dòng)出品的 html5 播放器，被應(yīng)用在了很多場(chǎng)景如：抖音、西瓜視頻、火山視頻等頭條系產(chǎn)品中。

視頻支持 MP4、HLS、FLV、MPEG-DASH。支持畫(huà)中畫(huà)、倍速播放、截圖等功能具體可以自己看官方文檔

官網(wǎng)

https://h5player.bytedance.com/generate/

在線咨詢

上一篇：javascript 獲取網(wǎng)頁(yè)各種寬度
下一篇：JavaScript 設(shè)置和控制下拉菜單

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML5Plus 構(gòu)建 APP 的截圖保存功能

牽扯功能

Show Me Code

您的項(xiàng)目需求