目錄

前言

這篇文章主要是介紹如何使用canvas實作分享截圖，
剛開始以為通過canvas繪畫分享圖片并不難，但實際上在開發的時候還是遇到非常多的坑
例如：
①圖片背景為透明
②分享圖只有文字沒有圖片
③圖片跨域問題
下面看例子：
分享圖片、分享內容描述、標題、二維碼都是通過請求介面動態生成

實作：一、body部分

框架我使用的是react，繪畫分享采用原生canvas、js實作，所以不用擔心vue、小程式、原生H5也是能夠適應，

一、構建canvas
下面展示一些 行內代碼片，

//ref是react獲取canvas元素的方法，也可以使用id，再通過getElementById() 方法獲取canvas
//寬高需要轉化為而二-四倍圖來提高清晰度、否則會導致分享截圖模糊，清晰度不足
 <canvas ref='canvas' width={1200} height={1600} className={styles.canvasImg}/>

//點擊分享按鈕觸發this.shareComponent(this.getUrlImg)方法
//非react框架，忽視其余代碼，直接觸發分享函式
              <div className={styles.luckDraw_viewPrizeBtn} onClick={()=>{
                     this.setState({
                         shareModal:true
                        },()=>{
                            this.shareComponent(this.getUrlImg)
                        })}
                 }>分享活動</div>

實作：二、JS部分：

shareComponent函式

//函式接受一個回呼函式，用于繪畫完成后，再將canvas轉化為png圖片格式，
//canvas移動端無法長按保存，必須傳為img才能保存，
shareComponent = (callback)=>{
    let suncode = this.state.suncode //微信小程式太陽碼
    let activityName = this.state.activityName //活動標題
    let backgroundImg = this.state.backgroundImg //背景圖
    let postShareDesc= this.state.postShareDesc //分享描述欄位
    let img = new Image()
    img.crossOrigin="anonymous"; //關鍵，處理圖片跨域問題！！
    let _t = this
    //限制活動標題，最多10個字，超過...省略
    if(activityName.length>10){
        activityName=activityName.slice(0,10)+'...'
      }
    //由于canvas文字不能自動換行，所以我們這里需要做一個文字換行處理，以及字數的限制，防止超出canvas范圍
    let arrDescribe = [] 
    let maxLeng = postShareDesc.length/20 //分享描述每行20字，最多8行
    if(maxLeng=>8){
        maxLeng = 8 //最多8行
    }
    //postShareDesc為分享描述欄位
   
    for(let i = 0;i<maxLeng;i++){
    //將分享描述欄位分為若干個20字的行存入arrDescribe陣列，且最多8行
        let str = postShareDesc.slice(i*20,i*20+20) 
        arrDescribe.push(str)
    }
    //圖片加載完后，將其顯示在canvas中，圖片必須使用onload方式，否則會導致圖片未加載完成就完成繪畫
    //img為整張分享圖
    img.onload = function (){
      let canvas = _t.refs.canvas //獲取canvas元素
      let ctx = canvas.getContext('2d')
        //設定背景色，否則背景色會透明
        ctx.fillStyle='#fff';
        ctx.fillRect(0,0,1196,1596);
        ctx.drawImage(img, 0, 0,1200,600);
		//分享欄位描述
        ctx.font="52px Arial";
        ctx.fillStyle='#000';
        //手動換行，80為X坐標，700+index*100為動態計算Y坐標
        arrDescribe.forEach((item,index)=>{
            ctx.fillText(item,80,700+index*100);
        })
        //分享標題
        ctx.font="64px Arial";
        ctx.fillStyle='#000';
        ctx.fillText(activityName,520,1320);
		//分享提示
        ctx.font="48px Arial";
        ctx.fillStyle='#999';
        ctx.fillText('長按小程式碼查看詳情',520,1420);
		//分享提示
        ctx.font="48px Arial";
        ctx.fillStyle='#999';
        ctx.fillText('分享自[XXXX]',520,1500);
		//分割線
        ctx.moveTo(1120,1160);
        ctx.lineTo(80,1180);
        ctx.strokeStyle="#E8E8E8"
        ctx.stroke();
        //img1為小程式太陽碼
        let img1 = new Image()
        img1.crossOrigin="anonymous"; //關鍵，處理太陽碼轉化為base64格式圖片時的跨域問題
        img1.onload = function(){
        ctx.drawImage(img1,  80, 1200,340,340)
        callback(canvas)

      }
	  太陽碼賦值給img1
      img1.src = suncode
	  //邊框
      ctx.strokeStyle="#f5f5f5";
      ctx.rect(0,0,1200,1600);
      ctx.stroke();      

    }
	//timeStamp 事件屬性可回傳一個時間戳，指示發生事件的日期和時間（從 epoch 開始的毫秒數），
	//URL時間戳的用法：作用：為了防止瀏覽器快取，
	//URL后面添加亂數或時間戳通常用于防止瀏覽器（客戶端）快取頁面， 瀏覽器快取是基于URL進行快取的，
	//如果頁面允許快取，則在快取時效前再次訪問相同的URL，瀏覽器就不會再次發送請求到服務器端，而是直接從快取中獲取指定資源，
	//而當URL 的末尾追加了亂數或時間戳，就會保證每次都會實際生成新請求且 Web 服務器不會嘗試快取來自服務器的回應，
    const a = `${backgroundImg}?timeStamp=` + (new Date());
    img.src = a

  }
//繪畫完成后，必須轉化為img，否則移動端將會無法長按保存
//必須等繪畫完成后，才能夠回呼，如果直接使用canvas.toDataURL('image/png')轉化，會導致出現分享圖只有寫死的文字，沒有請求的圖片和文字，會存在異步問題
  getUrlImg=(canvas)=>{   
    let dataImg = new Image()    
    try {
      dataImg.src = canvas.toDataURL('image/png')
    } catch (e) {
      console.log(e);
    }
    let urlImg = dataImg.src //urlImg為img路徑
    this.setState({urlImg},()=>{ 
    })
  }

實作：三、canvas更換imgs

//最后必須將canvas隱藏，再替換為imgs，這樣移動端才能長按保存
//css中.canvasImg添加display：none隱藏畫布
//再使用canvas轉化的img，并且將img的寬高設定為25%
//因為為了提高清晰度，我是采用四倍圖再壓縮的方式來提高清晰度，所以img需要碩訓25%
    <canvas ref='canvas' width={1200} height={1600} className={styles.canvasImg}/>//display：none
    //crossOrigin="Anonymous" 處理圖片跨域問題
    <img src={this.state.urlImg} crossOrigin="Anonymous"/>//width：25%，height：25%
    div className={styles.shareTips}>長按保存，可分享至朋友圈</div>

總結與優化

難點在于：
①將canvas轉化為base64格式圖片，會導致圖片跨域問題
②異步問題（圖片還未加載，繪畫就已經完成）
③背景透明的問題等等

優化：
①清晰度：可以將canvas畫成2-4倍圖，轉化為圖片再壓碩訓50%-25%
②分享圖加載速度：小程式二維碼太陽碼，背景圖等頁面加載階段可以先請求，點擊分享按鈕可以直接繪畫，減少請求時間長導致生成繪畫慢問題，同時也可以避免二維碼、背景圖未加載完成，繪畫就已經開始，導致畫出來的分享圖沒有背景圖、二維碼的問題，

有需要的朋友可以參考學習下，如有不足之處，歡迎批評指正，