what！html 2 img！

“好久不用小松鼠浏览器了，不知道它家推送的标题是不是依旧那么惊悚,学不来呀，学不来……”

小伙伴们！好久不见。之前比较忙（lǎn），最近才有时间写点儿东西，打算重新搭上公众号的车，希望大家多点赞，多关注，多刷大游艇，卖萌脸。

今天的主题是《 h5 转 img 的实现方法——初探》

需求描述

微信中展现h5页面，点击其中的“截图”按钮后将整个页面转换成为常见图片格式，展现在遮罩页面上，利用微信自带的长按保存/分享功能，获取图片到本地。

解决思路

暂时没有发现 html 直接转换成 img 的方法，后来搜到了下面的方法可以通过两步转换达到目的：

将 html 转换成为 canvas，有一个现成的插件可用html2canvas.js

canvas 转 img，通过 canvas 的.toDataURL()方法，得到base64编码的dataURL，然后赋值给 标签的 src 属性。

简单来说就是：html → canvas → img

相关框架

jquery weui：项目页面整体UI框架，包括了loading弹框,fastclick等常用的插件

html2canvas.js：html 转 canvas

代码实现

切图仔又来贴渣代码了~

html 部分：

html2img

......内容

......内容

......内容

css 部分:

.img2canvas{//用户是看不到的，用来存放起过度作用的canvas，一直隐藏

display: none;

}

.newImg{//图片转换成功后，显示

display: none;

position: fixed;

background:#ccc;

left:0px;

right:0px;

top:0px;

bottom:0px;

z-index:10;

padding:10px;

}

.newImgimg{

height:100%;

display: block;

margin: auto;

}

js部分：

$("#html2img-btn").on('click',function(){

event.preventDefault();//去掉a标签默认动作

$.showLoading("图片加载中");//jquey weui 提供的loading插件

html2canvas(document.querySelector("#js-capture")).then(function(canvas){

$(".img2canvas").append(canvas);

$("canvas").attr('id','thecanvas');

setTimeout(function(){

varoCanvas =document.getElementById("thecanvas");

varimage =newImage();

// 设定图片格式为PNG

image.src = oCanvas.toDataURL("image/png");

$('.newImg').empty().append(image);

$.hideLoading();

//显示遮罩并阻止body滚动

$(".newImg").fadeIn(800,function(){

$("body").css('position','fixed');

});

//点击遮罩空白区返回页面

$(".newImg").on('click',function(){

$("body").css('position','inherit');

$(this).fadeOut();

})

//点击图片时防止穿透

$(".newImg img").on('click',function(e){

e.stopPropagation();

})

},1000);

});

});

代码优化

功能基本实现，不过还有很多地方需要优化和解决，这也是本文取名为"初探"的原因，后期解决问题如下：