在做微信公众号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="/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>// 获取按钮idvar btnSave = document.getElementById("btnSave");// 获取内容idvar 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生成为图片，保存到手机。 大家有更好的方法可以给予点评。
![[2024年]平凡的树叶作文700字](https://700zi.400zi.cn/uploadfile/img/2024/05/31/d809809ecd166bbb831e25a63f33bdf9.jpg)
