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

標籤：小女子   怎麼   視窗   轉換   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 頁面存為圖片並長按 儲存