資訊專欄INFORMATION COLUMN
摘要：這個(gè)功能在我的瀏覽器和谷歌瀏覽器時(shí)可以實(shí)現(xiàn)功能的。但是發(fā)現(xiàn)華為自帶的瀏覽器不支持。
[1]我要實(shí)現(xiàn)的功能是用戶填寫完表單后，點(diǎn)擊提交按鈕，截圖。截圖放在一個(gè)彈層里面，給一句提示"長(zhǎng)按圖片保存至手機(jī)"。
js引入的是bluebird.min.js和html2canvas.js
輾轉(zhuǎn)寫了這些代碼，邏輯是點(diǎn)擊按鈕，截圖，然后間隔一秒鐘顯示彈層。到這一步貌似實(shí)現(xiàn)功能。下面用真機(jī)測(cè)試遇到了兩個(gè)問(wèn)題：
有些手機(jī)已經(jīng)出現(xiàn)了下載圖片選項(xiàng)
但是點(diǎn)擊下載圖片圖片下載不下來(lái)，沒(méi)有一點(diǎn)動(dòng)作。后來(lái)前輩給出指導(dǎo)說(shuō)有些css屬性是html2canvas.js這個(gè)插件不支持的，比如：before屬性，我把頁(yè)面上用到的before屬性全部替換后也不行，后來(lái)在common.css一行一行刪樣式，找到一個(gè)屬性 body {overflow-x: hidden},把overflow-x: hidden去掉后是可以下載的，除了這兩個(gè)屬性，可能還有其它一些css不支持。
第二個(gè)問(wèn)題，我用的手機(jī)是華為，用谷歌瀏覽器長(zhǎng)按圖片發(fā)現(xiàn)沒(méi)有下載圖片選項(xiàng)
這個(gè)問(wèn)題也是問(wèn)了前輩，說(shuō)可能是截圖的圖片質(zhì)量太大導(dǎo)致的，然后我嘗試將截圖范圍縮小
縮小范圍后是可以有下載圖片選項(xiàng)，并且可以下載。
這是我使用插件遇到的一些問(wèn)題。這篇文章的第三張和第四張圖片是我順手截圖展示效果的，第一張和最后一張才是我項(xiàng)目中操作的圖片。
這個(gè)功能在我的QQ瀏覽器和谷歌瀏覽器時(shí)可以實(shí)現(xiàn)功能的。但是發(fā)現(xiàn)華為自帶的瀏覽器不支持。最后因?yàn)榍岸思嫒菪蕴钣昧肆硗庖环N寫法：后臺(tái)處理好，把圖片路徑返回給前臺(tái)，我就把圖片路徑放到指定位置。雖然最終方案沒(méi)有使用html2canvas.js，但我想把遇到的問(wèn)題寫出來(lái)，希望別人少走些彎路。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114790.html
摘要：這個(gè)功能在我的瀏覽器和谷歌瀏覽器時(shí)可以實(shí)現(xiàn)功能的。但是發(fā)現(xiàn)華為自帶的瀏覽器不支持。 [1]我要實(shí)現(xiàn)的功能是用戶填寫完表單后，點(diǎn)擊提交按鈕，截圖。截圖放在一個(gè)彈層里面，給一句提示長(zhǎng)按圖片保存至手機(jī)。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...
摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。小結(jié)是目前實(shí)現(xiàn)網(wǎng)頁(yè)保存為圖片功能的綜合最佳選擇。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開(kāi)，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見(jiàn)于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中調(diào)研和踩坑的一些小結(jié)和匯總。 ...
摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。小結(jié)是目前實(shí)現(xiàn)網(wǎng)頁(yè)保存為圖片功能的綜合最佳選擇。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開(kāi)，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見(jiàn)于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中調(diào)研和踩坑的一些小結(jié)和匯總。 ...
摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。小結(jié)是目前實(shí)現(xiàn)網(wǎng)頁(yè)保存為圖片功能的綜合最佳選擇。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開(kāi)，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見(jiàn)于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中調(diào)研和踩坑的一些小結(jié)和匯總。 ...
摘要：本次技術(shù)調(diào)研來(lái)源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過(guò)的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來(lái)源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開(kāi)，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見(jiàn)于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...
閱讀 3424·2021-09-22 16:00
閱讀 3467·2021-09-07 10:26
閱讀 3027·2019-08-30 15:55
閱讀 2868·2019-08-30 13:48
閱讀 1376·2019-08-30 12:58
閱讀 2178·2019-08-30 11:15
閱讀 958·2019-08-30 11:08
閱讀 534·2019-08-29 18:41
