1，帶滾動(dòng)條的繪制（PC端）

需求如下：

需求.png

效果圖：

效果.png

實(shí)現(xiàn)方式及注意事項(xiàng)：

• 使用的是 html2canvas 1.0.0-rc.1 版本
• html頁(yè)面結(jié)構(gòu)說(shuō)明
  • div.export-canvas 是定高虱咧、帶滾動(dòng)條的容器
  • prepareRef 是繪制區(qū)域
  • 背景圖熊榛、圖片均放在了項(xiàng)目里面（如果是網(wǎng)絡(luò)圖片，需要轉(zhuǎn)換為base64）
  • “導(dǎo)出預(yù)習(xí)表?yè)P(yáng)榜”是一個(gè)a標(biāo)簽腕巡，herf=繪制結(jié)束之后的圖片地址
• 注意： 虛線繪制后是實(shí)線，對(duì)這個(gè)功能來(lái)說(shuō)影響不大

html結(jié)構(gòu).png

點(diǎn)擊“生成圖片"對(duì)應(yīng)的方法：

  makeCanvasFun(ref){
        let that = this;
        //rc.1版本不需要設(shè)置width/windowWidth等屬性,不然發(fā)布到線上 圖片空白
        html2canvas(that.$refs[ref],{
          async: true,
          backgroundColor: null,
          scale:2
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          let tmpBlob = that.base64ToBlob(dataURL); //[object blob]
          that.prepareUrl = window.URL.createObjectURL(tmpBlob);//base64轉(zhuǎn)換為blob格式的圖片血筑，便于 a 標(biāo)簽的 download
        }).catch((e) => {
          console.log('canvas catch e.message',e.message)
          console.log(e);
        });
      },

2绘沉，兼容ios13.6+（微信h5頁(yè)面）

需求效果如下：

• 選擇圖片，并可以旋轉(zhuǎn)豺总、縮放上傳的圖片
• 用戶頭像车伞、變化的二維碼

• 手機(jī)端生成海報(bào)圖

  
  
  需求.png

效果.png

實(shí)現(xiàn)方式：

• html2canvas 版本號(hào) 1.0.0-rc.5 ，引用js及解決方案
• 上傳的圖片file轉(zhuǎn)換為base64
• 圖片的移動(dòng)和縮放使用的是 AlloyFinger
• 背景圖使用的項(xiàng)目里的圖片喻喳，網(wǎng)絡(luò)圖片要是同域圖片然后轉(zhuǎn)換為base64
• 頭像和二維碼圖片 均是同域圖片
• html及部分js

<div class="poster-body">
      <!--createRef 為繪制區(qū)域-->
      <div class="poster-create" ref="createRef">
            <div class="pinch-box">
              <!--用戶上傳的圖片容器-->
              <img :src="imgUploadSrc" alt="" class="pinch-img"
                   id="pinchImg" >
            </div>
            <div class="poster-company">
              <!--海報(bào)固有的圖片另玖、二維碼、用戶信息等-->
              <!--<div class="nick">學(xué)生名chin(*^▽^*)</div>-->
              <img :src="userHead" alt="" id="j_user_header" class="avatar">
              <img :src="imgQrcode" alt="" id="j_user_code" class="qrcode">
              <img :src="posterBg" alt="" class="poster-bg">
            </div>
      </div>
</div>

      // input[type=file]的change事件  -- 選擇圖片之后
        changeFileFunc(ele){
          let that = this;
          let file = document.getElementById(ele).files[0]
          if(file){
            that.changeFileToBaseURL(file,function (base) {
              that.imgUploadSrc = base;
            }); //上傳的圖片的base64url
          }else{
            console.log('未選擇圖片')
          }
        },

        //將file文件轉(zhuǎn)換為base64
        changeFileToBaseURL(file,callback){
          let fileReader = new FileReader();
          if(file){
            fileReader.readAsDataURL(file);
            fileReader.onload = function (e) {
              let imgBase64Data = e.target.result; //也可以使用this.result,因?yàn)閠his 指向了 e.target
              callback(imgBase64Data);
            }
          }else{
            return null
          }
        },

    //將網(wǎng)絡(luò)圖片 轉(zhuǎn)換為base64,純js,不依賴jquery, imgUrl必須是同域
    changeOnlineImgToBaseUrl(imgUrl,callback){
          window.URL = window.URL || window.webkitURL;
          let xhr = new XMLHttpRequest()
          xhr.open("get",imgUrl,true);
          xhr.responseType = "blob"; //使用blob對(duì)象
          xhr.onload = function () {
            if(this.status ==200){
              var blob = this.response;
              let fileReader = new FileReader();
              fileReader.readAsDataURL(blob);
              fileReader.onload = function (e) {
                let imgBase64Data = e.target.result; 
                callback(imgBase64Data);
              }
            }else{
              console.log('xhr status 不是200 , ',this.status)
            }
          }
          xhr.send();
        },


//生成海報(bào)按鈕
createPosterFun(){
    let that = this;
    (window.html2canvas || html2canvas)(that.$refs.createRef,{
            useCORS:true,
            allowTaint:true,
            backgroundColor: null,
            scale:3
          }).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png");
            that.finalUrl = dataURL; //最終顯示的圖片地址表伦，微信中長(zhǎng)按即可存儲(chǔ)

          }).catch((e) => {
            console.log('canvas catch e.message',e.message)
            console.log(e);
          });
}

參考文檔