html2Canvas导出图片

Yee烊

已于 2023-01-29 14:54:42 修改

阅读量1k

点赞数 1

文章标签： javascript 前端 html

于 2022-12-19 14:31:48 首次发布

本文链接：https://blog.csdn.net/weixin_57246557/article/details/128372031

版权

本文介绍了如何使用html2Canvas库将网页上的图片导出为图片文件，并通过JavaScript实现点击下载功能。开发者展示了选择图片元素、设置导出参数、转换canvas到DataURL以及创建下载链接的过程。

摘要由CSDN通过智能技术生成

import html2Canvas from 'html2Canvas'
import waterMark from 'watermark.js' // 引入添加水印方法 导出图片可以添加水印 
exportImg(){
	let imgDom = document.querySelector('.pircture') // 导出图片dom
	let imgName = '图片'
	let width = imgDom.scrollWidth
	let height = imgDom.scrollHeight
	let opts = {
		scale:2,
		height,
		width,
		useCORS:true, // 开启跨域配置
	}
	html2Canvas(imgDom,opts).then((canvas) => {
		canvas = waterMark.spreadMarkScreen(canvas,'lisi',15,width,height,10,10,100,50) // 图片添加水印
		let a = document.createElement('a')
		a.style.display = 'none'
		let blob = this.dataURLToBlob(canvas.toDataURL('image/png'))
		a.setAttribute('href',URL.createObjectURL(blob))
		a.setAttribute('download',imgName+'.png')
		document.body.appendChild(a)
		a.click()
		URL.revokeObjectURL(blob)
		document.body.removeChild(a)
	})
}
dataURLToBlob(dataUrl){
	let arr = dataUrl.split(','),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Unit8Array(n),
	while(n--){
		u8arr[n] = bstr.charCodeAt(n)
	}
	return new Blob([u8arr],{type:mime})
}