html2canvas踩坑之滚动条、ios13.6兼容

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);
          });
}

参考文档

名称	默认	描述
async	true	是否异步解析和呈现元素
allowTaint	false	是否允许跨原始图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果在DOM中未指定。设置 null 为透明
canvas	null	canvas 用作绘图基础的现有 元素
foreignObjectRendering	false	是否在浏览器支持的情况下使用ForeignObject渲染
imageTimeout	15000	加载图像的超时（以毫秒为单位）。设置 0 为禁用超时。
ignoreElements	(element) => false	谓词函数，用于从渲染中删除匹配元素。
logging	true	启用日志记录以进行调试
onclone	null	在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的情况下呈现的内容。
proxy	null	Url到 代理 ，用于加载跨源图像。如果留空，则不会加载跨原始图像。
removeContainer	true	是否要清理克隆的DOM元素html2canvas会暂时创建
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率。
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	canvas的宽度
height	Element height	canvas的高度
X	Element x-offset	裁剪画布x坐标
Y	Element y-offset	裁剪画布y坐标
scrollX	Element scrollX	渲染元素时使用的x滚动位置（例如，如果Element使用 position: fixed ）
scrollY	Element scrollY	渲染元素时使用的y滚动位置（例如，如果Element使用 position: fixed ）
windowWidth	Window.innerWidth	渲染时使用的窗口宽度 Element ，可能会影响媒体查询等内容
windowHeight	Window.innerHeight	渲染时使用的窗口高度 Element ，这可能会影响媒体查询等内容