引入html2canvas.js，是这个版本：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<!--<link href="css/media.css" rel="stylesheet" type="text/css">-->
</head>
<body>
<div class="mainBox">
<div class="centerBox">
<div class="mainForm">
<div class="title">辽宁省食品销售日常监督检查要点表(试行)</div>
<div class="tebDetail">
<div class="line">
<div class="part w26">检查项目</div>
<div class="part">检查内容</div>
<div class="part w12">评价</div>
<div class="part w8-9">分数</div>
<div class="part w6-5">序号</div>
<div class="part w14-8">备注</div>
</div>
<div class="line">
<div class="part w26">基础项（小型经营者）</div>
<div class="part noPadd">
<div class="line">
<div class="part">1、经营者持有的食品经营区可证是否合法有效。</div>
<div class="part w16-2"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w12">否决项</div>
<div class="part w8-8">1.1</div>
<div class="part w20"><textarea rows="3"></textarea></div>
</div>
<div class="line">
<div class="part">2、食品经营许可证载明的有关内容与实际经营是否相符。 </div>
<div class="part w16-2"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w12">2.3</div>
<div class="part w8-8">*3.1</div>
<div class="part w20"><textarea rows="3"></textarea></div>
</div>
</div>
</div>
<div class="line">
<div class="part w10">选择项</div>
<div class="part noPadd">
<div class="line">
<div class="part w8-5">经营食品品种</div>
<div class="part noPadd">
<div class="line">
<div class="part w10">畜禽肉+1</div>
<div class="part">1、经营者持有的食品经营区可证是否合法有效。</div>
<div class="part w14-6"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w10-8">否决项</div>
<div class="part w7-9">2.5</div>
<div class="part w18"><textarea rows="3"></textarea></div>
</div>
<div class="line">
<div class="part w10">畜禽肉+2</div>
<div class="part">1、经营者持有的食品经营区可证是否合法有效。</div>
<div class="part w14-6"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w10-8">否决项</div>
<div class="part w7-9">2.5</div>
<div class="part w18"><textarea rows="3"></textarea></div>
</div>
</div>
</div>
<div class="line">
<div class="part w8-5">经营企业类型</div>
<div class="part noPadd">
<div class="line">
<div class="part w10">畜禽肉+1</div>
<div class="part noPadd">
<div class="line">
<div class="line">
<div class="part">1、经营者持有的食品经营区可证是否合法有效。</div>
<div class="part w16-2"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w12">否决项</div>
<div class="part w8-8">2.5</div>
<div class="part w20"><textarea rows="3"></textarea></div>
</div>
<div class="line">
<div class="part">2、经营者持有的食品经营区可证是否合法有效。</div>
<div class="part w16-2"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w12">0.5</div>
<div class="part w8-8">2.5</div>
<div class="part w20"><textarea rows="3"></textarea></div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="part w10">畜禽肉+2</div>
<div class="part">1、经营者持有的食品经营区可证是否合法有效。</div>
<div class="part w14-6"><label><input type="radio" name="r1"><span></span>是</label><label><input type="radio" name="r1"><span></span>否</label></div>
<div class="part w10-8">否决项</div>
<div class="part w7-9">2.5</div>
<div class="part w18"><textarea rows="3"></textarea></div>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="part w10">其他</div>
<div class="part w16">其他需要记录或检查的事项</div>
<div class="part"><textarea rows="3"></textarea></div>
</div>
</div>
<div class="tips">
说明：点击开始劳动纪律撒建档立卡撒旦教的记录卡萨建档立卡撒娇的雷克萨带上课劳动纪律撒娇的拉萨都核对后切勿年后大大傻逼比
hi就撒跨境电商连裤袜的登记卡是角度看点击开始劳动纪律撒建档立卡撒旦教的记
录卡萨建档立卡撒娇的雷克萨带上课劳动纪律撒娇的拉萨都核对后切勿年后大大傻逼比hi就撒跨境电商连裤袜的登记卡是角度看
</div>
</div>
</div>
</div>
<img id="down1" src="" >
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<link href="js/html2canvas.js" rel="stylesheet" type="text/css">
<script>
$(function(){
htmlToimg($(".mainForm"));
})
function htmlToimg(ele) {
html2canvas(ele, {
// 页面高度
height: ele.outerHeight(),
// 页面宽度
width: ele.outerWidth(),
onrendered: function(canvas) {
console.log(canvas);
console.log(canvas.toDataURL());
// 生成图片的地址
$("#down1").attr('src',canvas.toDataURL());
// 图片名字
$("#down1").attr('poster.png') ;
}
});
}
</script>
</html>
需要注意：
1：若有页面有持续性动画，应该给‘#down1’图片设置透明度，这样既保证微信中长按可保存，也不损失页面中的持续动态效果。
2：若页面显示时有加载动画，应该等该页面所有元素加载完成后再调用，否则图片不全。
为什么要偏偏要引入这个版本的包？因为这个版本的包可以这样简单使用，我也没有发现有截图质量、尺寸等糟心的问题，换了其他版本的包就各种问题，该方法也不能正常使用。效率至上，该研究的总要去研究，但效率更重要。
2020.04.23 增加兼容ie
兼容ie.zip
页面引入顺序
<script type="text/javascript" src="{:C('PUBLIC')}/js/bluebird.js" ></script>
<script type="text/javascript" src="{:C('PUBLIC')}/js/html2canvas.js" ></script>
function imgdown(){
//生产图片
html2canvas(document.getElementById("print"),{
dpi: window.devicePixelRatio*2,
scale:2,
onrendered: function(canvas) {
$.post("{:U('/Api/Index/base64toimg')}",{"image":canvas.toDataURL(('image/jpeg', 1.0))},function(data){
location.href=data.imgurl;
//window.open(data.imgurl);
layer.close(loading);
$("#print").hide();
},"json");
//console.log(canvas);
//var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
//window.open(imgURL);
//$("#print").hide();
}
});
}
后我采用了图片base64 再生成图片 这样可以保证图片色值不丢
6 条评论
兼容ie需要加什么 能说具体吗
我追加了 最后我采用了图片base64 再生成图片
没看懂ie的那个怎么用(☆ω☆)
327907762@qq.com 加我qq
你好 兼容IE吗??
我项目代码是兼容ie 有点问题 需要增加一些东西