“好久不用小松鼠浏览器了,不知道它家推送的标题是不是依旧那么惊悚,学不来呀,学不来……”
小伙伴们!好久不见。之前比较忙(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);
});
});
代码优化
功能基本实现,不过还有很多地方需要优化和解决,这也是本文取名为"初探"的原因,后期解决问题如下:
领取专属 10元无门槛券
私享最新 技术干货