使用html2canvas.js實現功能中遇到的一些問題

zhisheng 發布于2019-08-23 18:02 / 3077人閱讀

摘要：這個功能在我的瀏覽器和谷歌瀏覽器時可以實現功能的。但是發現華為自帶的瀏覽器不支持。

[1]我要實現的功能是用戶填寫完表單后，點擊提交按鈕，截圖。截圖放在一個彈層里面，給一句提示"長按圖片保存至手機"。

js引入的是bluebird.min.js和html2canvas.js

輾轉寫了這些代碼，邏輯是點擊按鈕，截圖，然后間隔一秒鐘顯示彈層。到這一步貌似實現功能。下面用真機測試遇到了兩個問題：

有些手機已經出現了下載圖片選項
但是點擊下載圖片圖片下載不下來，沒有一點動作。后來前輩給出指導說有些css屬性是html2canvas.js這個插件不支持的，比如：before屬性，我把頁面上用到的before屬性全部替換后也不行，后來在common.css一行一行刪樣式，找到一個屬性 body {overflow-x: hidden},把overflow-x: hidden去掉后是可以下載的，除了這兩個屬性，可能還有其它一些css不支持。
第二個問題，我用的手機是華為，用谷歌瀏覽器長按圖片發現沒有下載圖片選項

這個問題也是問了前輩，說可能是截圖的圖片質量太大導致的，然后我嘗試將截圖范圍縮小

縮小范圍后是可以有下載圖片選項，并且可以下載。
這是我使用插件遇到的一些問題。這篇文章的第三張和第四張圖片是我順手截圖展示效果的，第一張和最后一張才是我項目中操作的圖片。
這個功能在我的QQ瀏覽器和谷歌瀏覽器時可以實現功能的。但是發現華為自帶的瀏覽器不支持。最后因為前端兼容性太差用了另外一種寫法：后臺處理好，把圖片路徑返回給前臺，我就把圖片路徑放到指定位置。雖然最終方案沒有使用html2canvas.js，但我想把遇到的問題寫出來，希望別人少走些彎路。

云服務器 GPU云服務器使用遇到問題布局遇到的問題學習遺傳算法遇到的問題看apue遇到的有關問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104562.html

使用html2canvas.js實現功能中遇到的一些問題

摘要：這個功能在我的瀏覽器和谷歌瀏覽器時可以實現功能的。但是發現華為自帶的瀏覽器不支持。 [1]我要實現的功能是用戶填寫完表單后，點擊提交按鈕，截圖。截圖放在一個彈層里面，給一句提示長按圖片保存至手機。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

Alliot 2019-08-30 11:08 評論0 收藏0
基于html2canvas實現網頁保存為圖片及圖片清晰度優化

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。小結是目前實現網頁保存為圖片功能的綜合最佳選擇。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中調研和踩坑的一些小結和匯總。 ...

JerryWangSAP 2019-08-30 13:45 評論0 收藏0
基于html2canvas實現網頁保存為圖片及圖片清晰度優化

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。小結是目前實現網頁保存為圖片功能的綜合最佳選擇。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中調研和踩坑的一些小結和匯總。 ...

mayaohua 2019-08-01 17:44 評論0 收藏0
基于html2canvas實現網頁保存為圖片及圖片清晰度優化

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。小結是目前實現網頁保存為圖片功能的綜合最佳選擇。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中調研和踩坑的一些小結和匯總。 ...

denson 2019-08-21 16:56 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

zhaochunqi 2019-08-01 17:43 評論0 收藏0