前端使用html2canvas生成图片-CFANZ编程社区

项目场景是完成测评试题，生成学生测评报告，部署在微信公众号上的移动端H5页面，

本文记录vue中使用html2canvas生成图片。

html2canvas官方网站

1基础使用

1.1 安装html2canvas

 npm install html2canvas

 import html2canvas from 'html2canvas';

1.2 html2canvas 的配置选项

配置项	默认	描述
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`移除容器	是否清理 html2canvas 临时创建的克隆 DOM 元素
scale	`window.devicePixelRatio`规模	用于渲染的比例。默认为浏览器设备像素比。
useCORS	`false`使用CORS	是否尝试使用 CORS 从服务器加载图像
width	`Element` width宽度	的宽度`canvas`
height	`Element` height高度	的高度`canvas`
x	`Element` x-offset	裁剪画布 x 坐标
y	`Element` y-offset	裁剪画布 y 坐标
scrollX	`Element` scrollX滚动X	渲染元素时使用的 x 滚动位置，（例如，如果元素使用`position: fixed`）
scrollY	`Element` scrollY滚动Y	渲染元素时使用的 y 滚动位置，（例如，如果元素使用`position: fixed`）
windowWidth	`Window.innerWidth`窗口宽度	渲染时使用的窗口宽度`Element`，这可能会影响媒体查询等内容
windowHeight	`Window.innerHeight`窗口高度	渲染时使用的窗口高度`Element`，这可能会影响媒体查询等内容

1.3 vue中使用代码

<template>
   <div class="app_container" id="repImg" ref="repImg">
      <p>
        content  
     </p>
     <button @click="generateImage"></button>
   </div>
 </template>
 import html2canvas from 'html2canvas';
 export default {
  methods: {
     generateImage: function() {
      // 通过this.$refs获取vue页面中的dom元素
       let canvasID = this.$refs['repImg'];
       var _this = this;
       let a = document.createElement('a');
     // 获取元素的可滚动内容的高度
       var height = document.querySelector('#repImg').scrollHeight
       console.log(canvasID)
       canvasID.style.height = height+"px";
       canvasID.style.zIndex = '-1';
       html2canvas(canvasID).then(function(canvas) {
         let dom = document.body.appendChild(canvas);
         dom.style.display = 'none';
         a.style.display = 'none';
         document.body.removeChild(dom);
         let blob = _this.dataURLToBlob(dom.toDataURL('image/png'));
         a.setAttribute('href', URL.createObjectURL(blob));
         //这块是保存图片操作  可以设置保存的图片的信息
         a.setAttribute('download', '测评报告' + '.png');
         document.body.appendChild(a);
         a.click();
         URL.revokeObjectURL(blob);
         document.body.removeChild(a);
       });
     },
      dataURLToBlob(dataurl) {
             let arr = dataurl.split(',');
             let mime = arr[0].match(/:(.*?);/)[1];
             let bstr = atob(arr[1]);
             let n = bstr.length;
             let u8arr = new Uint8Array(n);
             while (n--) {
                 u8arr[n] = bstr.charCodeAt(n);
             }
             return new Blob([u8arr], { type: mime });
         },
   }
 }