如何使用html2Canvas，把页面或者图层保存成图片

最新推荐文章于 2024-04-21 19:02:14 发布

该昵称已被占用咯

最新推荐文章于 2024-04-21 19:02:14 发布

阅读量296

点赞数

分类专栏：开发实用实录文章标签： javascript 前端 html jquery

本文链接：https://blog.csdn.net/u013105204/article/details/124904133

版权

开发实用实录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目场景

图片分享，很多业务尤其是移动端，为了吸引用户参与，会制作跟用户相关的画像，然后可以保存到自己的相册，我做过的就是一个 个性签名用户在输入完成，生成图片既而可以通过图片分享到各个平台
Latex，展示，打印需求，很多教育类的产品都有，latex公式打印的需求，便于学生记忆等

实操

htm2Canvas，的官网已经介绍了，大概的使用方法，此处我也将分为2种不同的方式来说明

本地引用，此方法对Jquery，无安装第三方依赖的项目类使用比较友好
官网下载资源到本地目录，在你需要的地方引用
let html2canvas = require("@/js/html2canvas.min.js")

getCanvasImg(){
 - // #capture 你要保存为图片的 图层	
	let _this = this; 
	html2canvas(document.querySelector("#capture")).then(canvas => {
		// canvasImg 为生成的图片
		// _this 为什么是_this? 因为此处this的指向已经发生了变化
		_this.canvasImg = canvas.toDataURL()
	});
},

在你的事件里面调用getCanvasImg方法即可
至于生成图片后如何保存，移动端直接长按图片就可以啦嘿嘿
第三方依赖，此方法大多用在框架项目中，通过指令轻轻松松搞定啦
- 在npm install --save html2canvas或者yarn add html2canvas
- 安装完成后，引入到你需要使用的地方

getCanvasImg(){
	const _this = this;
    const contId = document.getElementById('question-content')
    const contWidth = contId.offsetWidth
    const contHeight = contId.offsetHeight
	html2canvas(contId,{
		width: contWidth, // 可以设置canvas的宽高
	  	height: contHeight, 
	  	scale: 1, // 不按照分辨率 进行缩放
	  	backgroundColor: null,
	  	useCORS: true,
	}).then(canvas => {
	  _this.canvasImg = canvas.toDataURL()
	});
}