html2canvas 实现下载图片，并指定下载图片大小

目录

概要

需求

配置选项

1.示例

下载安装

dom区域

按钮

核心方法

---

概要

在日常开发中会遇到一些场景如：网页内指定区域下载成图片。这里给大家介绍一种组件html2canvas。

需求

需求：一个海报需要指定下载大小750px，并且dom是有圆角的需要给圆角外区域给透明色。透明效果如图。

思路：实际dom区域很大需要设置下载大小，并且要给他的背景设置透明色避免圆角显示有问题。

配置选项

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

示例

下载安装

npm install --save html2canvas

或 

yarn add html2canvas

 文件内引入

import html2canvas from 'html2canvas';

dom区域

<div id="download-images">
	这里是内容
</div>

按钮

<a-button type="primary" @click="downloadQrcode">下载海报</a-button>

核心方法

点击方法后一秒钟即可下载图片。a标签的download下载，html2canvas绘制画布。

scale 就是实现指定下载大小的关键，可用于渲染的比例。默认为浏览器的设备像素比率。

useCORS 是否尝试使用CORS从服务器加载图像

backgroundColor 设置为'transparent'即可实现背景区域透明

const downloadQrcode = () => {
	setTimeout(() => {
		const link = document.createElement('a')
		const canvas = html2canvas(document.getElementById('download-images'), {
			scale: 2.82, // 缩放比例 这个数值根据具体需求调整
            useCORS: true,
            backgroundColor: 'transparent' // 背景区域设置透明背景色
		}).then(function (canvas) {
			link.setAttribute('download', '分享海报') // 设置下载名称
			link.href = canvas?.toDataURL('image/png', 1) // 转换为png格式
			link.click()
		})
	}, 1000);
}