一.需求
需求先定好，頁面展示什麼元素，和產品先核對好
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展示，解決端外可以長按儲存的功能。並且能夠保證儲存的圖片有動態資訊。
程式碼
- 安裝html2canvas，版本 "version": "1.0.0-alpha.12",引入。[低版本圖片生成後會模糊]
- 基於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圖片
});
複製程式碼發現遇到問題：
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
}
]
);
複製程式碼- 動態圖片渲染生成base64給後臺後臺返回不全。
a、新增useCORS:true屬性；
b、給要生成canvas的DOM中包含的每一個標籤新增crossorigin="anonymous"屬性；
c、確保你的圖片CDN伺服器支援CORS訪問，也就是會返回Access-Control-Allow-Origin等響應頭；
html2canvas(document.querySelector('#capture'), {useCORS:true}).then(canvas => {}
複製程式碼- 端外的長按儲存。
等html2canvas生成後，將原來的dom元素隱藏，並將圖片新增到頁面中。這種就可以長按儲存圖片了。 - 卡牌上傳的圖片不能寫圓角。
-
後期優化問題。
因為圖片生成然後傳給後臺再到後臺返回給我們 需要一定的時間。如果在圖片還沒有返回來的時候 ，點選生成圖片的按鈕就會有問題。所以優化是在進入到結果頁的時候，預設的結果頁在後臺圖片還沒有拿到的時候，先將圖片透明，加一個使用者提示，圖片生成中。等圖片完全返回後，再將頁面的透明度去掉。這樣就能保證使用者點選生成圖片按鈕的時候 完全沒有問題。 -
沒有動態資料，不需要用html2canvas生成圖片。需要注意的問題。