使用 html2canvas 生成图片

1、Html2Canvas 概述

html2canvas允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

官方文档：https://html2canvas.hertzen.com/documentation

2、使用Html2Canvas截图

这里还是通过vue项目来进行说明，先安装依赖。

npm install html2canvas

官网用法说明：要element使用带有一些（可选）选项的 html2canvas 渲染，只需调用html2canvas(element, options);

html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);
});

首先我们在指定的vue页面先将html2canvas导入。

import html2canvas from "html2canvas";

假设我们这里有一个canvas对象，是通过echart绘制的一个图，其对应的html代码如下：

<div id="myChart" class="myChart"></div>

之后我们给添加一个下载按钮，直接触发downloadImg事件。先直接获取canvas的toDataURL得到的是一个base64编码后的图片数据，之后我们只需要将这个base64的数据生成图片下载下来即可。

    /*** 下载图片*/downloadImg() {console.log("download ....");html2canvas(document.querySelector("#myChart")).then((canvas) => {var url = canvas.toDataURL();this.downloadFile(url, "中国地图");});},/*** @description Base64转Blob* @param dataUrl base64地址*/dataURLtoBlob(dataurl) {var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},/*** @description 构建a标签，通过a标签下载文件* @param url 下载地址* @param name 下载的文件名*/downloadFile(url, name = "中国地图") {var a = document.createElement("a");a.setAttribute("href", url);a.setAttribute("download", name);a.setAttribute("target", "_blank");let clickEvent = document.createEvent("MouseEvents");clickEvent.initEvent("click", true, true);a.dispatchEvent(clickEvent);},/*** @description 将得到的base64文件转码下载* @param base64 图片base64编码* @param name 文件名称*/downloadFileByBase64(base64, name) {var myBlob = this.dataURLtoBlob(base64);var myUrl = URL.createObjectURL(myBlob);this.downloadFile(myUrl, name);},

使用 html2canvas 生成图片相关推荐

前端使用html2canvas生成图片踩坑
前端使用html2canvas生成图片经验总结前言主要是总结一下html2canvas生成图片的基础用法,以及自己在使用html2canvas过程中踩过的坑和相应的解决思路背景近段时间接手一个 ...
QRCode 转二维码，html2canvas生成图片海报
项目场景: 使用QRCode,html2canvas技术 QRCode 转二维码,html2canvas生成图片海报并分享到微信和朋友圈和保存图片 1.安装QRCode (1)安装 npm i qrc ...
前端使用html2canvas生成图片
项目场景是完成测评试题,生成学生测评报告,部署在移动端H5页面, 本文记录vue中使用html2canvas生成图片. html2canvas官方网站 1基础使用 1.1 安装html2canvas ...
html2canvas 生成图片以及出现白边问题解决办法生成海报
html2canvas 生成图片以及出现白边问题解决办法: 我在写demo的时候,pc端调试正常,但是到了移动端图片底部就会出现一条白边,我的解决办法就是:backgroundColor: &qu ...
修改html2canvas生成图片的dpi
今天做的项目需要把生成的图片打印出来,设计说生成的图片dpi不够,用html2canvas的scale参数怎么改dpi都是72,修改scale图片的像素会变大,图片是清晰了,但是不知道满不满足打印需求 ...
html2canvas导出照片样式乱,html2canvas生成图片（图片样式和显示样式不一致）
//引入下载图片 //克隆一个table(因为显示样式与导出样式不一致,所有用此方法解决) var cloneDom = $(".dataTables_list").clone ...
Vue脚手架html2canvas生成图片
下载插件 npm install html2canvas@1.0.0-rc.4 --save 页面引入 import html2canvas from "html2canvas" ...
html2canvas生成图片空白或缺失问题解决
最近接到反馈,先前做的一个小工具会出现一些bug 主要原理是根据用户填写的内容生成一个隐藏起来的节点,并把这个节点截取生成图片下载下来: 首先把这个节点显示出来发现节点是正常的那么问题就出现在获取节 ...
uniapp html2canvas 生成图片
下载插件 html2canvas.min.js 直接粘贴复制下面的也可以 /*!* html2canvas 1.0.0-rc.3 <https://html2canvas.hertzen.co ...

使用 html2canvas 生成图片

使用 html2canvas 生成图片相关推荐

最新文章

热门文章