本文介绍了如何结合mui、html2canvas和qrcode.js插件在网页上生成并长按保存二维码图片。通过示例代码展示了如何在移动端通过长按事件触发html2canvas截图，并将截图保存为图片。同时，注意到微信和手机浏览器本身已具备长按保存图片的功能。
参考 ：
1.JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）
2.js将canvas保存成图片并下载
3.使用mui实现长按保存图片_Ctrl30-优快云博客
我做的一个需要生成二维码 并长按保存图片的页面，用了mui+html2canvas+qrcode
qrcode.js生成二维码插件
测试时发现微信和手机浏览器都有自己的长按图片保存功能，所以说不需要使用别的了
新的html
<div class="mui-content">
<div class="mui-content-padded" id="boxWrap" style="margin: 5px;" >
<div class="XyPic" id="capture">
<img src="/images/校友证书.jpg" style="width: 100%;" />
<div id="name"><?=$name ?></div>
<div id="bianhao">SJZXY<span style="color: red;"><?=$id ?></span></div>
<div id="qrcode"></div>
<div id="baoc">
长按保存图片<br/>分享到朋友圈
</div>
<div id="canvasWrap">
</div>
</div>
</div>
</div>css
<style>
.XyPic{
width: 7.3rem;
height: 10.94rem;
position: relative;
z-index: 9;
}
#name{
font-size: 36px;
font-weight: 400;
color: black;
position: absolute;
top: 3.58rem;
left:2.8rem;
}
#bianhao{
font-size: 18px;
font-weight: 400;
position: absolute;
bottom: 2rem;
left:5rem;
}
#qrcode{
/* width: 2.5rem;
height: 2.5rem; */
position: absolute;
bottom: 2.4rem;
left:1rem;
}
#baoc{
font-size: 11px;
color:#365C84 ;
position: absolute;
bottom: 1.7rem;
left:1.2rem;
}
#canvasWrap{
position: absolute;
top: 0;
z-index: 99;
}
</style>js
<script src="../js/mui.min.js"></script>
<script src="../js/qrcode.js"></script>
<script type="text/javascript" src="../js/html2canvas.js"></script>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false，不监听
release:false//默认为false，不监听
}});
window.onload =function(){
// 生成二维码
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,//设置宽高
height : 100
});
qrcode.makeCode("http://www.xiaoyou.sjzlg.com:7070");
html2canvas(document.querySelector("#capture")).then(canvas => {
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
img.style.cssText = "width: 100%;"
document.querySelector("#canvasWrap").appendChild(img);
});
}
</script>
下面时旧的
html部分
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;" >
<div class="XyPic" id="capture">
<img src="/images/校友证书.jpg" style="width: 100%;" />
<div id="name">于志强</div>
<div id="bianhao">SJZXY<span style="color: red;">0001</span></div>
<div id="qrcode"></div>
<div id="baoc">
长按保存图片<br/>分享到朋友圈
</div>
</div>
</div>js部分
<script src="../js/mui.min.js"></script>
<script src="../js/qrcode.js"></script>
<script type="text/javascript" src="../js/html2canvas.js"></script>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false，不监听
release:false//默认为false，不监听
}});
window.onload =function(){
// 生成二维码
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,//设置宽高
height : 100
});
qrcode.makeCode("http://www.baidu.com");
}
document.addEventListener("longtap", function(event) {
var name = event.target.tagName;
if(name === "IMG") {
html2canvas(document.querySelector("#capture")).then(canvas => {
downLoad(saveAsJPG(canvas));
// document.body.appendChild(canvas)
});
}
});
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
};
function downLoad(url){
var oA = document.createElement("a");
oA.download = '校友证';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
};
</script>一：JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助 html2canvas 这个第三方 js 库即可实现，下面通过样例演示其如何使用。
一、基本介绍
1，什么是 html2canvas
- html2canvas 可以通过获取 HTML 的某个元素，然后生成 Canvas，从而让用户保存为图片。
- html2canvas 工作原理是将当页面渲染成一个 Canvas 图片，通过读取 DOM 并将不同的样式应用到这些元素上。
- html2canvas 不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。
2，适用的浏览器
只要浏览器支持 Canvas 即可，包括：Firefox 3.5+、Google Chrome、Opera 新的版本、IE9 以上的浏览器。
3，注意事项
当然并不是所有的页面元素都可以进行转换的，下面是不支持的情况：
- 不支持 iframe
- 不支持跨域图片（可以先将线上图片转换成 base64，然后用 base64 作为图片路径）
- 不支持 flash
- 不支持 transform、transition 过渡、animation 动画（备注：transform 初始布局是可以的，但是不能参与动画类的操作）
4，安装配置
（1）首先到官网将 html2canvas.js 下载到本地。
（2）然后在页面中将其引用即可。
| 1 |
|
二、基本用法
1，将整个页面转成 Canvas
（1）效果图
- 点击“开始生成”按钮后，会将整个页面渲染成一个 canvas，并将这个 canvas 添加到页面尾部。
- 右键点击生成的 canvas，可以将其作为图片保存到本地。
（2）样例代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
2，将指定 DOM 元素转成 Canvas
下面样例只将按钮上方的 div 渲染成 Canvas。
| 1 2 3 |
|
3，将 Canvas 转换成 base64 形式
（1）上面样例生成 canvas 后，便直接显示在页面上进行预览。我们也可以将生成的 canvas 转成 base64 形式用于提交到后台，或者作为 <image> 元素的 src 属性来显示。
| 1 2 3 4 |
|
（2）转换时可以设置截图质量（0~1）
| 1 2 3 4 |
|
三、进阶用法
1，设置生成的 Canvas 的高度和宽度
html2canvas 在使用时还有许多可选的配置参数，下面样例生成一个 75*75 的 canvas。
| 1 2 3 4 5 6 |
|
2，设置 Canvas 的背景色
（1）使用 backgroundColor 这个属性可以设置 canvas 的背景色：
- 默认值为白色（#ffffff）
- 如果想要背景透明，可以将其设为 null
（2）下面将背景色改成绿色
| 1 2 3 4 5 6 7 |
|
3，设置放大倍数
（1）使用 scale 属性可以修改渲染时的放大倍数（默认为 1），将其调大可以解决低分辨率设备下生成的图片模糊问题。
（2）下面是当 scale 设置为2时，生成的图片。
| 1 2 3 4 5 |
|
4，指定渲染的 Canvas
如果页面上原先就有个 canvas 元素，我们希望可以将图片绘制在它上面，可以使用 canvas 属性设置。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
js将canvas保存成图片并下载
| 1 2 3 4 |
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
|
文中图片是个七巧板，如下:
首先初始化mui（longtap是我们要用到的，longtap默认为false，如果没有初始化为true，则长按事件无效）
mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false，不监听
release:false//默认为false，不监听
}});
//给需要长按保存图片的img标签设置 class='saveImg'
var divs = document.getElementsByClassName('saveImg');
for(var i = 0;i<divs.length;i++){
divs[i].addEventListener('longtap', function () {
//开启弹框
mui('#picture').popover('toggle');
var imgurl = this.src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相册
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 关闭弹框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});
})
}else{
mui.toast('保存失败')
}
});
imgDtask.start();
});
})
}
<-- 弹框的html-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存图片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
ps：要引入mui的js和css
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
