1，带滚动条的绘制（PC端）

需求如下：

需求.png

效果图：

效果.png

实现方式及注意事项：

• 使用的是 html2canvas 1.0.0-rc.1 版本
• html页面结构说明
  • div.export-canvas 是定高、带滚动条的容器
  • prepareRef 是绘制区域
  • 背景图、图片均放在了项目里面（如果是网络图片，需要转换为base64）
  • “导出预习表扬榜”是一个a标签，herf=绘制结束之后的图片地址
• 注意： 虚线绘制后是实线，对这个功能来说影响不大

html结构.png

点击“生成图片"对应的方法：

  makeCanvasFun(ref){
        let that = this;
        //rc.1版本不需要设置width/windowWidth等属性,不然发布到线上 图片空白
        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转换为blob格式的图片，便于 a 标签的 download
        }).catch((e) => {
          console.log('canvas catch e.message',e.message)
          console.log(e);
        });
      },

2，兼容ios13.6+（微信h5页面）

需求效果如下：

• 选择图片，并可以旋转、缩放上传的图片
• 用户头像、变化的二维码

• 手机端生成海报图

  
  
  需求.png

效果.png

实现方式：

• html2canvas 版本号 1.0.0-rc.5 ，引用js及解决方案
• 上传的图片file转换为base64
• 图片的移动和缩放使用的是 AlloyFinger
• 背景图使用的项目里的图片，网络图片要是同域图片然后转换为base64
• 头像和二维码图片 均是同域图片
• html及部分js

<div class="poster-body">
      <!--createRef 为绘制区域-->
      <div class="poster-create" ref="createRef">
            <div class="pinch-box">
              <!--用户上传的图片容器-->
              <img :src="imgUploadSrc" alt="" class="pinch-img"
                   id="pinchImg" >
            </div>
            <div class="poster-company">
              <!--海报固有的图片、二维码、用户信息等-->
              <!--<div class="nick">学生名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文件转换为base64
        changeFileToBaseURL(file,callback){
          let fileReader = new FileReader();
          if(file){
            fileReader.readAsDataURL(file);
            fileReader.onload = function (e) {
              let imgBase64Data = e.target.result; //也可以使用this.result,因为this 指向了 e.target
              callback(imgBase64Data);
            }
          }else{
            return null
          }
        },

    //将网络图片 转换为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对象
          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();
        },


//生成海报按钮
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; //最终显示的图片地址，微信中长按即可存储

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

参考文档