微信浏览器将html保存为图片并保存

最新推荐文章于 2024-05-17 01:55:20 发布

qq_42829670

最新推荐文章于 2024-05-17 01:55:20 发布

阅读量1.4w

点赞数

分类专栏： MUI框架

本文链接：https://blog.csdn.net/qq_42829670/article/details/82890855

版权

MUI框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求:将含有二维码的html转化成图片并保存

思路:

1.将html页面转化成图片需要使用H5中canvas（画布）功能，需要引入js库:

html2canvas.js

canvas2image.js

jquery.min.js（必须要）

qrcode.min.js （用于二维码的生成）

2.通过qrcode.min.js 生成其相应的二维码，并将其通过画布绘制成图片，并将其存入到二维码位置，并将画布绘制的图片进行隐藏;

3.将html页面进行canvas绘制成图片(会显示出三个相同的页面，1个是html页面,1个是canvas绘制的容器，1个是生成的图片)；

思路:

第一步:将绘制容器canvas进行style:border:0;

第二步:将生成图片存放在html页面上，并将其设置成透明（style="top:0;left:0;width:100%;opacity:0;"）

4.使用jquery写入函数自加载运行，长按保存图片

源码:

<!doctype html>

<html>



<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="__INDEX__/css/app.css" />



<script src="__INDEX__/js/html2canvas.js"></script>

<script src="__INDEX__/js/canvas2image.js"></script>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="__INDEX__/js/qrcode.min.js"></script>



<style>

*{margin: 0;padding: 0;}

body{background-color: #f5f8fd;}

.my-info{

display: flex;

/*justify-content: space-between;*/

align-items: center;

padding: 0 1rem;

width: 100%;

height: 3rem;

background-color: #fff;

/* position: fixed;*/

top: 0;

box-sizing: border-box;

color: #5c5c5c;

}

.my-info .card-title{

display: inline-block;

width: 100%;

text-align: center;

margin-left: -24px;

}

.card-head{

display: flex;

justify-content: space-between;



width: 100%;

height: 2rem;

padding: 0 1rem;

box-sizing: border-box;

font-size: 1rem;



}

.card-head span:first-child{

font-size: 1.2rem;

font-weight: bold;

}

.card-item{

display: flex;

background-color: #fff;

width: 90%;

height: 7rem;

padding: 1rem;

border-radius: .5rem;

margin: 0 auto;

}

.card-item .ci-left{

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

/*padding: 1rem;*/

}

.card-item .ci-left span{

font-size: .8rem;

color: #05c0ac;

}

.card-item .ci-left .card-money{

font-size: 2rem;

line-height: 2rem;

}

.card-item .ci-right{

display: flex;

flex-direction: column;

justify-content: center;

/*align-items: center;*/

padding: 1rem 0 1rem 1rem;



}

.card-item .ci-right span:first-child{

font-size: 1rem;

line-height: 1.6rem;

}

.card-item .ci-right span.over-date{

font-size: 1.2rem;

color: #f97a30;

}

.img{

position:absolute;

width:22%;

z-index:10;

}

#share-img{



}

.btn{

position:absolute;

width:12%;

z-index:14;

}

#pics{

position: absolute;

top: 0;

left: 0;

opacity: 2;



}

canvas{

border:0;

display:none;

}



</style>

</head>



<body id="imgs">



<!--头部-->

<header class="my-info">

<div class="head-left" onClick="javascript :history.back(-1);">

<span class="mui-icon mui-icon-back"></span>

</div>

<span class="card-title">分享中心</span>

</header>



<div class="content" style="width:100%;position:relative" id="tupic">

<!-- <a id="share"></a>-->

<img id="share-img" src="__INDEX__/images/test.jpg" alt="" style="width:100%;"/>

<!--<img src="http://api.k780.com:88/?app=qr.get&data=http://xx.com?shareuid=<?=session('shareuid')?>" width="" style="display:none" class="img" id="qrcode"> -->

<div id="qrcode" class="img"></div>

<img id="pics" style="width:100%">

<input type="image" src="__INDEX__/images/btn.png" id="btn" class="btn" >

</div>





<script src="__INDEX__/js/mui.min.js"></script>

<script type="text/javascript">

var shareuid = "{:session('uid')}";

mui.init();

$(function(){



setTimeout(function(){

var ewmHeight = $('#share-img').height();

//alert(typeof ewmHeight);

var imgH = Math.floor(ewmHeight/7);

//alert(ewmHeight)

//var img = $('');

$('.img').css({

left:'8%',

bottom: imgH+'px',

display:'block'

});





},300)



});

</script>

<script>

$(function(){



setTimeout(function(){

var ewmHeights = $('#share-img').height();

// alert(ewmHeights);

var imgHs = Math.floor(ewmHeights/30);

//alert(ewmHeight)

//var img = $('');

$('.btn').css({

left:'6%',

bottom: imgHs+'px',

display:'block',

width:'87%'

});





},300)



});

</script>



<script>

new QRCode(document.getElementById('qrcode'), '');



// 设置参数方式

var qrcode = new QRCode('qrcode', {

text: 'http://xx.com?shareuid=<?=session('uid')?>&from=singlemessage',

width: 85,

height: 85,

colorDark : '#000000',

colorLight : '#ffffff',

correctLevel : QRCode.CorrectLevel.H

});

</script>

<script>

// $(document).ready(function () {

// document.querySelector('#imgs').onclick = function(){

//html2canvas(document.querySelector("#tupic")).then(function (canvas) {

// document.body.appendChild(canvas);

//获取截取图片路径

//var base64Url = canvas.toDataURL('image/png');

//存入页面指定位置

//document.getElementById("pics").src = base64Url;

// var triggerDownload = $("#share").attr("href", base64Url).attr("download", "share.png");

//triggerDownload[0].click();

// });

// }

// });



setTimeout(function(){

html2canvas(document.querySelector("#tupic")).then(function (canvas) {

document.body.appendChild(canvas);

var base64Url = canvas.toDataURL('image/png');

document.getElementById("pics").src = base64Url;

});

},1000);

</script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script src="__INDEX__/js/share.js"></script>

</body>



</html>

qq_42829670

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
微信浏览器将html保存为图片并保存

需求:将含有二维码的html转化成图片并保存思路:1.将html页面转化成图片需要使用H5中canvas（画布）功能，需要引入js库:html2canvas.jscanvas2image.jsjquery.min.js（必须要）qrcode.min.js （用于二维码的生成） 2.通过qrcode.min.js 生成其相应的二维码，并将其通过画布绘制成图片，并...
复制链接

扫一扫