H5页面使用html2canvas实现div生成为图片，保存到手机

最新推荐文章于 2024-04-30 19:51:10 发布

小青年一枚

最新推荐文章于 2024-04-30 19:51:10 发布

阅读量6.3k

点赞数 5

分类专栏： vue

本文链接：https://blog.csdn.net/qq_32195805/article/details/113745556

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在做微信公众号H5页面时，需求要求html页面生成base64图片，并保存到手机相册中。之前没做过，在网上搜了相关的资料。了解到了html2canvas.js。 html2canvas首先将页面生成canvas画布，然后转换成base64图片。最后长按图片保存到手机相册。

在这里插入图片描述

这是效果图，接下来我们看代码。

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
   <title></title>
   <link rel="stylesheet" href="css/style.css"/>
   <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
   <script src="css/html2canvas.min.js"></script>
   <script src="css/canvas2image.js"></script>
   <script src="css/base64.js"></script>
<body  class="bg_color">
	<div id="flexGird" style="background:#fff">
	<div class="flex_item_head">
		<h2>牛气冲天</h2>
		<p>最高奖金100,000元</p>
	</div>
	<div class="flex_gird" >
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
			<span>1</span>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
			<span>2</span>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
			<span>3</span>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
			<span>4</span>
			<div class="item_prize">
				<img src="icon/icon_prize.png" >
			</div>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" class="filter">
			<span>5</span>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" class="filter">
			<span>6</span>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" class="filter">
			<span>7</span>
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
		<a href="javascript:void(0);">
			<img src="icon/img.png" >
		</a>
	</div>
	</div>

	<div class="flex_line"></div>

	<div class="flex_gird_foot">
		<div class="flex_gird_alt">
			可点击上方游戏票进行"已刮奖票拍照上传"
		</div>
		
		<div class="flexBtn">
			<a href="javascript:;" class="flexBtnLeft" id="btnSave">生成照片去转发</a>
			<a href="javascript:;" class="flexBtnRight">重新上传游戏票</a>
		</div>
	</div>

	
	<!-- 将页面转换为画布 -->
	<canvas id="canvas"></canvas>

	<!-- 存储base64图片 -->
	<div class="base_img" >
		<div class="base_flex" >
			<div class="base_bg" >
				<img src="" id="base64Img" style="background:#fff;">
				<p>长按图片保存到手机</p>
			</div>
		</div>
	</div>
	


<script>
// 获取按钮id
var btnSave = document.getElementById("btnSave");

// 获取内容id
var content = document.getElementById("flexGird");

// 进行canvas生成
btnSave.onclick = function(){
	html2canvas(content, {
        onrendered: function(canvas) {
	
        	//添加属性
        	canvas.setAttribute('id','thecanvas');
			
			//读取属性值
            //document.getElementById('canvas').innerHTML = '';
            document.getElementById('canvas').appendChild(canvas);

			// 将图片转成base64格式
			var img = canvas.toDataURL("image/jpeg", 1.0); // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
			document.getElementById('base64Img').setAttribute("src", img) // 将base64格式图片显示到页面上

        }
	});
};
</script>
</body>
</html>

以上就是使用html2canvas实现div生成为图片并保存到手机。中间其实还有个小细节，当页面生成为画布转换为base64图片时，图片背景都是半透明的会有黑色背景。用js也可以实现（可以参考w3school），同时也可以用css来控制。css必须写在行内样式中。

以上就是简单的实现了H5页面使用html2canvas实现div生成为图片，保存到手机。大家有更好的方法可以给予点评。

小青年一枚

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
H5页面使用html2canvas实现div生成为图片，保存到手机

在做微信公众号H5页面时，需求要求html页面生成base64图片，并保存到手机相册中。之前没做过，在网上搜了相关的资料。了解到了html2canvas.js。 html2canvas首先将页面生成canvas画布，然后转换成base64图片。最后长按图片保存到手机相册。这是效果图，接下来我们看代码。<!doctype html><html><head> <meta charset="utf-8"> <meta http-equ
复制链接

扫一扫