H5 中html 頁面存為圖片並長按 儲存

來源:互聯網
上載者:User

標籤:小女子   怎麼   視窗   轉換   res   ips   問題   順序   出現   

最近接到的一個新需求:頁面一個靜態H5,中間有一頁是輸入資訊,然後跳轉到最後一頁,自動將頁面產生圖片,使用者可以長按圖片儲存到手機上。

展示一下最後一頁的樣子:

 

剛拿到這個需求,在網上看了很多文章,最普遍的是使用 html2canvas + canvas2image  來實現。於是,跟著前人的腳步,踏上了一個不斷采坑采坑采坑的旅程。

下面直接描述我在做這個需求過程中遇到的問題以及解決辦法吧:

1.html2canvas 圖片跨域:

這個問題網上很多解決辦法:

這個是最常用的, 剛開始我只是加了紅色框裡面的這一句,但是並沒有任何作用,依舊報錯。後來看到有人說,加上前面那一句,所以果斷在加進去。

這兩句其實表達的是同一個意思:允許圖片跨域。

當然,也有網友說,直接給一個空值就可以,我當時試了一下,並不ok~~~~.

 

 

2.多次使用canvas drawImage 方法圖片展示問題2.1 圖片載入順序問題

在我這個需求裡面,肯定是文字描述以及二維碼是展示在圖片上面的,剛開始我是

1. drawImage   文字,

2. drawImage    二維碼

3. drawImage   背景大圖

然而,結果讓我大吃一驚,只有背景圖載入渲染出來了。然後,通過無所不能的網路才知道:drawImage 的順序應該是:圖片最底下的需要最先載入渲染。

2.2 圖片顯示不完整

在2.1 問題出現的同時還遇到了這個問題,圖片渲染不完整,這。。nima。。。需求才剛開始做,怎麼這樣為難一個小女子。。。

不過有問題嘛,就解決咯。

圖片渲染不完整,原因就是:在圖片還沒有載入完成的時候,canvas 就開始進行渲染。

 因此解決辦法就是:等圖片載入完成後再進行drawImage 操作就可以啦,上~~~~代碼:

 

 

3.canvas 儲存為圖片的跨域問題

遇到這個問題,我真的是花了一堆一堆的時間來看文章,看部落格,,。

這會萬能的網友給我的解決辦法並沒有任何效果:

他們說:1.把圖片取下來放在自己伺服器上(我用的公司的圖片伺服器。但是和我的放代碼伺服器不是同一個地址啊)

2. 用canvas2Image 啊,然而,,這不也是跨域麼,,並沒有啥,,用。

3.還有啥來著,,忘了,反正那天搞得我精神崩潰,,,也沒解決到問題,,後來實在忍不住,問了公司的大神:大神說:你用base64 的呢。。

一語驚喜夢中人,對啊,這種方法多棒,這樣就不會跨域了啊。當時為了趕進度,直接線上吧圖片轉成basa64  ,然後存成一個js 檔案。

當時是這樣的:紅框裡表示的是檔案的格式。。、

 

至此,我的html 已經轉為canvas  並且從canvas 轉為img 存在頁面上了,,

 

後來我在看這一段,覺得似乎不太好,這個檔案顯得很大,所以我想在用這個檔案的時候在把它轉成base64 的格式,,

1.利用canvas todataUrl 將圖片轉為base64

但是這種方法不可避免的會出現跨域的問題,pass

2.base64.js  

這個檔案中中文轉碼會出問題,而且我試過了,基本的字串轉碼都是ok 的,但是對於檔案轉碼就會出問題

3.瀏覽器原生的並且都支援的一個東西: window.atob     and   window.btoa

window.atob  是將base64 格式轉換為字串或者二進位編碼格式

window.btoa  是將字串或者二進位編碼 格式轉換為base64  格式  所以上面的base64.js 真的,,別浪費時間精力去看了,,

那檔案編碼解碼呢?

原生的也有方法:FileRender()  這個建構函式,

var reader = new FileReader();

reader.onload = function(e) {

// e.target.result

};

reader.readAsDataURL(file);

這種方法沒有測試過o(╥﹏╥)o。。

所以,目前為止,需要把檔案轉為base64. 格式的,我並沒有找到合適的方法或者js 外掛程式來操作,如果各位有什麼好的辦法,麻煩告訴我(* ̄︶ ̄)。

 

 

4. 圖片模糊並且視窗中只顯示了一部分

才定義canvas 的時候,我是給canvas 定義了一個寬高的,寬高是背景圖的大小,因此在drawImage 的時候是按照canvas 實際尺寸進行渲染。

但是轉為圖片的時候是按照視窗的尺寸來進行的,因此圖片會模糊,如果給圖片設定canvas 寬高的話,圖片在視窗中又顯示不完整。

因此,就需要計算裝置的retio,

基本思路:計算出ratio  ---> 然後canvas 轉 img (按照canvas 實際尺寸進行渲染) ---> 圖片按照視窗大小進行縮放

這個方法直接返回的是裝置的ratio..

然後我們在進行canvas 渲染的時候,

在後面進行圖片渲染的時候,圖片的寬度直接除以 ratio ,這樣圖片就能完整的顯示在視窗中。

 

 

 

5. ios10.2 canvas 轉圖片 一片黑

至此,頁面是呈現出來了,並且在我的安卓(華為)上測試是ok

但是需求的同學(ios)告訴我:她的手機上最後一頁是黑色的和,頂部有個白色框,,,我一懵,天,不會ios 不支援吧。

於是,用了旁邊座位同學的手機。恩,也不行。。

啊啊啊啊啊,要崩潰。

在網上看了一下,有一種解決辦法就是:使用雙緩衝(出現黑屏的可能就是在drawImage 的時候計算量很大,然後渲染卡頓不成功)

大概思路就是:在建立一個cachecanvas 剛開始其實是把圖片渲染在這個緩衝的canvas 中的,然後在將cachecanvas 中的內容渲染到需要在頁面展示的canvas 中。

我在中間使用了一個延時,時間雖然很短,但是這樣也能確保cachacanvas 確實渲染完成在進行正式的canvas 渲染。

這樣,我周圍座位上的ios 上最後一頁都能顯示出來了,,但是那個ios10.2 的依舊不行,,啊,網上查了一下,這個版本的問題一直存在,所以,(?_?) ,

 

 就這樣,這個需求在我不斷采坑的過程中,好像也快完結了,這裡很少直接貼代碼進來,因為貼進來似乎看的不太好,所以我基本上是的。

 

最後,幾個小tips :

1.直接將網頁圖片存成base64 格式的,如果圖片很少,可以,如果圖片很多,還是建議不要這麼操作了,比較一個base64的資料格式就已經很大了。。。

2.圖片先壓縮,然後在進行base64格式編碼吧

3.對於drawImage 的位置,是相對於canvas  實際尺寸的。所以如果使用百分比,建議先得到視窗的寬高,然後在進行賦值。

4. 在使用canvas   fillText 的時候,有一個限制最大寬度,就是fillText 的最後一個參數(直接寫數值即可,不用帶單位,預設似乎是px)。

5.對於一般的H5,還是對圖片進行預先載入一下吧,。。(網上很多圖片預先載入的方法,自行尋找哦)。

H5 中html 頁面存為圖片並長按 儲存

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.