H5 將html頁面內容生成圖片並上傳至七牛

小編最近在做項目時遇到一個問題，那就是，需要將html頁面生成圖片後並傳給app客戶端，至於爲什麼要傳給客戶端，自然是因爲小編的這個項目是客戶端中嵌入h5頁面，故而需要和客戶端內部交互。那麼問題就來了，怎麼將html頁面生成圖片，小編在網上查找資料，都是說用html2canvas，find，那就用。好嘛，用了之後發現，小編生成的圖片格式爲base64格式，難不成將生成的base64編碼像在url後邊拼接參數一樣傳給客戶端，額…估計會炸了，所以想到將其上傳至七牛，生成外部鏈接後將該鏈接傳給客戶端，所以，纔有了這一篇筆記。話不多說，上代碼。

關於html2canvas ：
1、下載

• 官網地址：http://html2canvas.hertzen.com
• npm:npm i html2canvas

2、引入

• 直接使用script標籤引入
• 在項目中：import html2canvas from 'html2canvas'

//html:
<div class="container">
hello,world!
</div>
<img src="" class="img"/>
//js:
//1、生成圖片
function createImg(dom){
	var targetDom = document.querySelector(dom);
    var height = targetDom.scrollHeight;
    var width = targetDom.scrollWidth;
    html2canvas(targetDom, {
      useCORS: true,//是否使用跨域
      width:width,//圖片寬度
      height:height,//圖片高度
      backgroundColor: 'transparent'//圖片背景顏色,這個屬性小編要提醒一下各位童鞋，html2canvas中爲background，但小編使用background進行設置背景色是行不通的，也可能是因爲小編已經將頁面背景的設置了顏色，所以行不通，故而使用backgroundColor設置生成的圖片背景顏色纔可行
    }).then(canvas => {
      let img = canvas.toDataURL('image/png');//圖片格式
      $(".img").attr('src',img);
}

//2、獲取上傳七牛需要的token,獲取的api由後臺提供
function getToken(imgUrl){
    let params=  {
      bucket:"xxxxx"//上傳的空間域名
    }
    $.ajax({
    	type:"POST",
    	url:"xxxxx",
    	dataType:"json",
    	data:JSON.stringify(params)
    }).then(res=>{
    	//獲取到token後，do something
    })
 }

//3、將生成的圖片上傳至七牛
function upload(img,token){
	let imgUrl = img.split(",")[1];//因爲通過html2canvas生成的圖片格式爲base64格式，鏈接爲：data:image/png;base64,xxxxxxx,我們只需要傳xxxxx這一段，故而進行截取
    var url = "https://upload.qiniup.com/putb64/-1/aa"; //非華東空間需要根據注意事項 1 修改上傳域名
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
      if (xhr.readyState==4){
        let data = JSON.parse(xhr.responseText);
        if(data){
        	//獲取到data的數據結構：{hash:"xxxxxxx",key:"xxxxxx"}
        	//將data中的key拼接成外部可訪問的鏈接：http://空間域名.域名/data.key      }
    }
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization","UpToken "+token);
    xhr.send(imgUrl);
}

之前小編寫過一篇js調用iOS Android 原生方法的文章，iOS Android通過曝露接口，js通過調用該曝露的接口來進行H5與原生iOS Android即app內部進行交互，現小編給各位童鞋推薦另一種方法，但該方法只能是原生iOS Android監聽到h5 ,但h5不能監聽到原生的操作。

//js:
window.location.href = url;//url爲前端h5與原生商定好的，iOS Android通過監聽該鏈接來進行下一步的操作，也許會有童鞋說，介樣頁面不就跳轉了咩，嗯，不會，小編親測過，小編推薦的url的demo：xxxx://yyyyy（也可以是yyyy=需要傳遞的數據），這樣就不會跳轉哦~