0
点赞
收藏
分享

微信扫一扫

前端使用html2canvas生成图片

我是芄兰 2022-04-19 阅读 71
vue.js前端

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

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

html2canvas官方网站

1基础使用

1.1 安装html2canvas

 npm install html2canvas
 import html2canvas from 'html2canvas';

1.2 html2canvas 的配置选项

配置项默认描述
allowTaintfalse允许污染是否允许跨域图片污染画布
backgroundColor#ffffff背景颜色画布背景颜色,如果在 DOM 中没有指定。设置null为透明
canvasnull帆布canvas用作绘图基础的现有元素
foreignObjectRenderingfalse外国对象渲染如果浏览器支持,是否使用 ForeignObject 渲染
imageTimeout15000图像超时加载图像的超时时间(以毫秒为单位)。设置0为禁用超时。
ignoreElements(element) => false忽略元素从渲染中删除匹配元素的谓词函数。
loggingtrue日志记录为调试目的启用日志记录
onclonenull克隆克隆文档进行渲染时调用的回调函数,可用于修改将要渲染的内容而不影响原始源文档。
proxynull代理用于加载跨域图像的代理的 URL 。如果留空,则不会加载跨域图像。
removeContainertrue移除容器是否清理 html2canvas 临时创建的克隆 DOM 元素
scalewindow.devicePixelRatio规模用于渲染的比例。默认为浏览器设备像素比。
useCORSfalse使用CORS是否尝试使用 CORS 从服务器加载图像
widthElement width宽度的宽度canvas
heightElement height高度的高度canvas
xElement x-offset裁剪画布 x 坐标
yElement y-offset裁剪画布 y 坐标
scrollXElement scrollX滚动X渲染元素时使用的 x 滚动位置,(例如,如果元素使用position: fixed
scrollYElement scrollY滚动Y渲染元素时使用的 y 滚动位置,(例如,如果元素使用position: fixed
windowWidthWindow.innerWidth窗口宽度渲染时使用的窗口宽度Element,这可能会影响媒体查询等内容
windowHeightWindow.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 });
         },
   }
 }
     
举报

相关推荐

0 条评论