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);

});

});

代码优化

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

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180608G21G9800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券