-卡牌+動態信息長按保存圖片注意點~

一.需求

需求先定好，頁面展現什麼元素，和產品先覈對好
1.端內答題 獲得結果，結果頁上面沒有二維碼和長按保存提示(由於端內不支持)。點擊喚起分享平臺分享出去是卡牌。
2.端外和端內同樣的答題流程。答完題獲得結果頁，長按保存圖片，保存圖片有用戶的暱稱和頭像。

二·客戶端卡牌分享注意點

let Y = window.pt === 'adr' ? 930 : 910; 
// ios和安卓對於軸的文字定位的誤差，ios符合設計稿尺寸
Local.shareStyleImage(
          this.bgURL,  //必填 放背景圖片，分享的卡牌大小是由此背景圖片決定。
          [   // 定位在頁面的圖片數組，能夠放置多個。[]必傳;
            {
              url: this.qrURL, //圖片地址
              location: { x: 502, y: 850 }, // 定位的位置，參考絕對定位方法。
              width: 135, // 圖片寬度
              height: 135 // 圖片高度
            }
          ],  
          [ // 放定位文字的數組,[]必傳，ios666/667的安裝包必須
          要把text的參數寫上。安卓666/667能夠不穿
            {
              text: `長按掃碼，作套題壓壓驚`,
              location: {x: 390, y: Y},
              color: "ffffff", // 注意這裏沒有# 
              fontSize: 25
            }
          ] 
 );
複製代碼

• 分享圖片不能太大。不超過5m。儘可能小，jpg的格式
• 卡牌的二維碼 使用客戶端的方法添加。不要放在整個大的背景圖片上，由於有些安卓手機分享到QQ會壓縮處理圖片。- 保證清晰度 大小是135*135。
• 三個參數 沒有也要寫全。
  有些參數不須要用怎麼處理？
  第一個參數不須要：用透明的png圖片代替。（這種狀況後面會說到）；
  第二個參數圖片的數組不須要：[]
  第三個參數文字不須要：[]，ios填上text的參數
  

遺憾：

1.這種方法，填寫的動態文字只支持修改顏色和字號，不能使用特殊字體。
2.結果分類過多，設計同窗工做量增大。
3.使用同一組件，有動態信息，不能支持端外長按保存功能。

解決

html2canvas. 官網連接
思路：

• 將寫好的頁面，包含特殊字體和動態信息的dom生成一張圖片。將這個圖片做爲Local.shareStyleImage方法裏面的圖片。解決端內的特殊字體和設計同窗工做量問題
• 將生成的圖片替代原來的dom展現，解決端外能夠長按保存的功能。而且可以保證保存的圖片有動態信息。
  

代碼

1. 安裝html2canvas，版本 "version": "1.0.0-alpha.12",引入。[低版本圖片生成後會模糊]
2. 基於html2canvas.js可將一個元素渲染爲canvas，下列html2canvas方法會返回一個包含有canvas元素的promise.

html2canvas(document.querySelector('#capture')).then(canvas=>{
    let context = canvas.getContext('2d');
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    this.canvasPic = canvas.toDataURL(); // 獲得base64圖片
});
複製代碼

注 ：如今這個圖片就是一張完整的圖片。二維碼不要生成。若是要把2維碼放在頁面生成的話 2維碼大小寫成184 184 / 150150 [須要和設計商量]

3. 調用客戶端Local.shareStyleImage方法分享。
發現遇到問題：
a.base64圖片太大 客戶端不能分享。->轉化圖片格式
b.把生成的圖片當作背景圖片做爲第一個參數放入會有尺寸問題。->將它做爲第二個參數填入，能夠定義寬高
c.默認的背景圖片大小就是你分享卡牌的大小。必定要傳一樣尺寸的背景圖片
**d.若是卡牌高度超過了1334，那麼會將圖片等比縮小，形成卡牌有黑邊的狀況。【和設計商量】 接口返給咱們的圖片大小

html2canvas(document.querySelector('#capture'), {}).then(canvas => {
        let context = canvas.getContext('2d');
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        this.canvasPic = canvas.toDataURL();
        // 將base64轉化成png/jpg圖片的接口。原來的接口不支持png的，先接口已經完善。
        const imageData = encodeURIComponent(canvas.toDataURL().split(',')[1])
        const request = new XMLHttpRequest()
        request.open('POST', 'https://ptwapmusic3.reader.qq.com/activity/common/uploadPic');
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
        request.send(`imageData=${imageData}&actid=10171`)
        request.onload = _ => {
        const data = JSON.parse(request.response)z
        let imgObj = new Image(); // 建立圖片對象
        imgObj.src = data.url;
        imgObj.addEventListener('load', function () {
            console.log('fenxtu')
            }, false);
            this.canvasPicPng = data.url;
        }
 );
 
    Local.shareStyleImage(
          this.bgURL, // !!!不能夠不傳 我用了一個透明的png的圖片。這個圖片的寬高就是你卡牌展現的寬高
          [
            {
              url: this.canvasPicPng, // 生成的圖片
              location: { x: 0, y: 0 },
              width: 700,
              height: 1032
            },
            {
              url: this.qrURL, //二維碼 
              location: { x: 450, y: 770 },
              width: 135,
              height: 135
            }
          ],
          [
            {
              text: `長按掃碼，作套題壓壓驚`,
              location: {
                x: 390,
                y: Y
              },
              color: "ffffff",
              fontSize: 25
            }
          ]
        );
複製代碼

4. 動態圖片渲染生成base64給後臺後臺返回不全。
   a、添加useCORS:true屬性；
   b、給要生成canvas的DOM中包含的每個標籤添加crossorigin="anonymous"屬性；
   c、確保你的圖片CDN服務器支持CORS訪問，也就是會返回Access-Control-Allow-Origin等響應頭；
   

html2canvas(document.querySelector('#capture'), {useCORS:true}).then(canvas => {}
複製代碼

5. 端外的長按保存。
   等html2canvas生成後，將原來的dom元素隱藏，並將圖片添加到頁面中。這種就能夠長按保存圖片了。
6. 卡牌上傳的圖片不能寫圓角。

解決： 傳兩個圖片 一個頭像 一個容器，將透明的容器蓋在頭像上。

7. 後期優化問題。
   由於圖片生成而後傳給後臺再到後臺返回給咱們 須要必定的時間。若是在圖片尚未返回來的時候 ，點擊生成圖片的按鈕就會有問題。因此優化是在進入到結果頁的時候，默認的結果頁在後臺圖片尚未拿到的時候，先將圖片透明，加一個用戶提示，圖片生成中。等圖片徹底返回後，再將頁面的透明度去掉。這樣就能保證用戶點擊生成圖片按鈕的時候 徹底沒有問題。

8. 沒有動態數據，不須要用html2canvas生成圖片。須要注意的問題。

這個背景圖的顏色有點過渡。在長屏手機上有適配有問題。 -> 透明的png圖片

使用透明的png圖片，端外保存問題。 -> 展現用png 保存用jpg.