圖片跨域配合html2canvas生成截圖，並且解決安卓上圖片模糊的問題。

<div class="qr_code_share_Container">
    <div class="groupCodeBox">
      <div class="groupInfoBox">
        <div class="groupImgBox">
          {{if data.photoTitle == '羣聊'}} 
            <img src="{{data.groupAvatar}}" onerror="this.src='__STATIC__/images/default_portrait.png'" alt="頭像">
          {{else /}}
            <img src="{{data.avatar}}" onerror="this.src='__STATIC__/images/default_portrait.png'" alt="頭像">
          {{/if}}
          <p>{{data.photoTitle}}</p>
        </div>
        <span>{{data.name}}</span>
      </div>
      <div class="codeImgBox">
        <img class="myCode" src="{{data.qrCode}}" />
      </div>
      <p class="tipsP">{{data.desc}}</p>
    </div>
    <div class="btnBox">
      <div class="btn delete" id="shageCode">分享二維碼</div>
    </div>
  </div>
  <!-- 分享二維碼圖片 -->
  <div class="qr_code_share_open" id="qr_code_share_open">
    <div class="qr_code_share_imgBox">
      <div class="qr_code_share_img">
        <img id="code_img" src="" alt="">
      </div>
    </div>
    <span class="qr_code_share_ft">長按圖片保存或者分享</span>
  </div>
</div>

// 生成圖片
this.initPage = () => {
      ajax.get(
        {
          groupId,
          scene: 1
        },
        "/cloud/api/api/cloudQRcodeInfo",
        function(res) {
          if (res.code == 1) {
            $("#title").text(res.data.title) // 頁面標題
            $(".qr_code_share_Container").html(template("qr_code_share", { data: res.data })) // 渲染頁面
            createImg()
          } else {
            showErrorMsg(res.msg || "請重試")
          }
        }
      )
    }

    /**
     * 生成圖片
     */
    const createImg = () => {
      // 獲取圖片
      let photo = $(".groupImgBox img").attr("src")
      let qrcode = $(".codeImgBox img").attr("src")

      // 把獲取到圖片放到一個數組裏面 第一個是頭像  第二個是二維碼
      let srcArr = [{ src: photo }, { src: qrcode }]

      const handleImgSrc = data => {
        return new Promise((resolve, reject) => {
          // 創建img
          let img = new Image()
          // 創建canvas
          let canvas = document.createElement("CANVAS")
          let ctx = canvas.getContext("2d")
          // 允許圖片跨域
          img.crossOrigin = "Anonymous"
          // 賦值圖片路徑
          img.src = data
          img.onload = function() {
            canvas.height = img.height
            canvas.width = img.width
            ctx.drawImage(img, 0, 0)
            let dataURL = canvas.toDataURL("image/png")
            canvas = null
            resolve({
              code: 1,
              data: dataURL
            })
          }

          // 圖片加載失敗
          img.onerror = function() {
            resolve({
              code: 0,
              data: ""
            })
          }
        })
      }

      Promise.all(srcArr.map(item => handleImgSrc(item.src))).then(result => {
        if (!result[0].code) {
          $(".groupImgBox img").attr("src", "/application/cloud/view/static/images/fail.jpg")
        }
        if (!result[1].code) {
          $(".codeImgBox img").attr("src", "/application/cloud/view/static/images/fail.jpg")
        }
		// 主要是解決在安卓上圖片模糊
        let shareElem = $(".groupCodeBox")
        let width = shareElem.width() //獲取dom 寬度
        let height = shareElem.height() //獲取dom 高度
        let left = shareElem.offset().left
        let top = shareElem.offset().top
        let canvas = document.createElement("canvas") //創建一個canvas節點
        let scale = 2 //定義任意放大倍數 支持小數
        canvas.width = width * scale //定義canvas 寬度 * 縮放
        canvas.height = height * scale //定義canvas高度 *縮放\
        let hb = canvas.getContext("2d")
        hb.scale(scale, scale)
        hb.translate(-left, -top)

        if (result[0].code && result[1].code) {
          $(".groupImgBox img").attr("src", result[0].data)
          $(".codeImgBox img").attr("src", result[1].data)
          html2canvas(document.querySelector(".groupCodeBox"), {
            scale: scale,
            useCORS: true,
            canvas: canvas,
            allowTaint: true,
            width: width, //dom 原始寬度
            height: height
          }).then(function(canvasHtml) {
            // 【重要】關閉抗鋸齒
            canvasHtml.mozImageSmoothingEnabled = false
            canvasHtml.webkitImageSmoothingEnabled = false
            canvasHtml.msImageSmoothingEnabled = false
            canvasHtml.imageSmoothingEnabled = false
            let ImgUrl = canvasHtml.toDataURL()
            $("#code_img").attr("src", ImgUrl)
            $("#code_img").css("width", `${width}px`)
          })
        } else {
          html2canvas(document.querySelector(".groupCodeBox"), {
            scale: scale,
            useCORS: true,
            canvas: canvas,
            allowTaint: true,
            width: width, //dom 原始寬度
            height: height
          }).then(function(canvasHtml) {
            // 【重要】關閉抗鋸齒
            canvasHtml.mozImageSmoothingEnabled = false
            canvasHtml.webkitImageSmoothingEnabled = false
            canvasHtml.msImageSmoothingEnabled = false
            canvasHtml.imageSmoothingEnabled = false
            let ImgUrl = canvasHtml.toDataURL()
            $("#code_img").attr("src", ImgUrl)
            $("#code_img").css("width", `${width}px`)
          })
        }
      })
    }