标签：function src canvas base64 html2canvas 多图 num var 下载
完整代码
链接：https://pan.baidu.com/s/1IRj0auNm5FzfwPYM-ApNmA
提取码：kmgw
实现思路及踩过的坑
1.将图片样式到downloadImg-box中，并在后面遍历；
2.依次下载，等第一张图片执行完下载后再下载下一张【因为不这么搞，当图片下载量比较大而图片又是几m的时候就凉】
3.用户中360浏览器用户基数比较大，原有的功能是通过base64下载的图片，360浏览器不可以，就将base64转为图片后再下载；
4.imgName是图片名，你可以根据实际情况去改变后面这个拼接；
5.加了一层遮罩，显示下载进度【不然下载过程中样式是真的鬼畜】
6.代码中较多引用了网上的，如有原作者看到，可以回复我，我将你链接添加进来
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="download.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="downloadImg-box">
</ul>
<!--遮罩-->
<div class="download-mask">
<div class="loader">
<div class="mt30 loader-tip">图片正在下载中，请勿关闭浏览器</div>
<div class="mt5">
<font class="loader-num mr10">1</font>/
<font class="loader-all">0</font>
</div>
</div>
</div>
</body>
<script>
for(var i = 0;i<2;i++){
$('.downloadImg-box').append(
'<li class="downloadImg-bg" id="li'+i+'">'+
' <div class="tac downloadImg-tit">'+
' <b>合格证书</b>'+
' </div>'+
' <div class="download-box flex-row">'+
' <div class="download-user">'+
' <div class="download-picture">'+
' <img src="download-picture-1.jpg"/>'+
' </div>'+
' <div class="download-line">'+
' <div class="download-line-name">'+
' 工作单位：'+
' </div>'+
' <div class="download-line-word">'+
' 宁夏某个有限公司'+
' </div>'+
' </div>'+
' <div class="download-line">'+
' <div class="download-line-name">'+
' 身份证号：'+
' </div>'+
' <div class="download-line-word download-idCard">'+
' 640321111111111111'+
' </div>'+
' </div>'+
' <div class="download-line">'+
' <div class="download-line-name">'+
' 证书编号：'+
' </div>'+
' <div class="download-line-word">'+
' xx编号 '+
' </div>'+
' </div>'+
' </div>'+
' <div class="download-content flex-1">'+
' <div class="download-content-show">'+
' <font class="download-name">波波</font>同志于'+
' <font>2020</font>年'+
' <font>6</font>月'+
' <font>6</font>日至'+
' <font>7</font>月'+
' <font>6</font>日，参加“软件技能提升”培训班学习,共完成'+
' <font>60</font>学时学习。经考试成绩合格,特发此证。'+
' </div>'+
' <div class="download-content-seal">'+
' <div>培训单位（盖章）</div>'+
' <div class="mr40">'+
' <font>2020</font>年'+
' <font>6</font>月'+
' <font>6</font>日'+
' </div>'+
' </div>'+
' </div>'+
' </div>'+
'</li>'
);
}
downImg();
function downImg() {
var downloadNum = 1; //图片从第二张开始下载
var imgLength = $('.downloadImg-box li').length; //图片张数
doScreenShot(0);
$('.loader-all').html(imgLength);
$('.downloadImg-box').show();
function doScreenShot(num) { //点击截图，点击按钮后从第一张开始下载，下载完后重复执行这个方法
html2canvas($("#li" + num), {
onrendered : function(canvas) {
canvas.id = "mycanvas";
var mainwh = $("#li" + num).width();
var mainhg = $("#li" + num).height();
var imgName = ($("#li" + num).find('.download-name').html() + "--" + $("#li" + num).find('.download-idCard').html()); //这个是当前的姓名+身份证号拼接，并向download()传参，改变img文件名
var img = convertCanvasToImage(canvas);
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 2185, 1535); //设置图片大小和位置
img.src = convertCanvasToImage(canvas).src;
$(img).css({
background : "#fff"
});
//调用下载方法
if (browserIsIe()) { //假如是ie浏览器
DownLoadReportIMG(img.src, imgName);
$('.loader-num').html(num + 1);
if ((num + 1) == imgLength) {
$('.loader-tip').html('下载已完成,可前往浏览器保存地址查看下载证书');
}
} else {
download(img.src, imgName);
$('.loader-num').html(num + 1);
if ((num + 1) == imgLength) {
$('.loader-tip').html('下载已完成,可前往浏览器保存地址查看下载证书');
}
}
}
}
});
}
function convertCanvasToImage(canvas) { //绘制显示图片
var image = new Image();
image.src = canvas.toDataURL("image/png"); //获得图片地址
return image;
}
function convertImageToCanvas(image, startX, startY, width, height) { //生成canvas元素，相当于做了一个装相片的框架
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, 2185, 1535); //在这调整图片中内容的显示（大小,放大缩小,位置等）
return canvas;
}
function DownLoadReportIMG(imgPathURL) { //如果隐藏IFRAME不存在，则添加
if (!document.getElementById("IframeReportImg"))
$('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onl oad="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
if (document.all.IframeReportImg.src != imgPathURL) { //加载图片
document.all.IframeReportImg.src = imgPathURL;
} else { //图片直接另存为
DoSaveAsIMG();
var num = downloadNum++;
if (num < imgLength) {
doScreenShot(num);
}
if (num == imgLength) {
$('.downloadImg-box').hide();
}
}
}
function DoSaveAsIMG() {
if (document.all.IframeReportImg.src != "about:blank")
window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
function download(src, imgName) { // 另存为图片
var MIME = {
"image/jpeg" : "jpeg",
"image/png" : "png",
"image/jpg" : "jpg"
};
//检测下载
var fname = 'a' + "." + MIME[getContentType(src)];
var blob = getBlob(src);
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fname);
} else {
var $a = $("<a></a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName + ".png");
$a[0].click();
var num = downloadNum++;
if (num < imgLength) {
doScreenShot(num);
}
if (num == imgLength) {
$('.downloadImg-box').hide();
}
}
function getBlob(base64) {
return b64toBlob(getData(base64), getContentType(base64));
}
function getContentType(base64) {
return /data:([^;]*);/i.exec(base64)[1];
}
function getData(base64) {
return base64.substr(base64.indexOf("base64,") + 7, base64.length);
}
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {
type : contentType
});
return blob;
}
}
function browserIsIe() { //判断是否为ie浏览器
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
}
</script>
</html>
标签：function,src,canvas,base64,html2canvas,多图,num,var,下载 来源： https://blog.csdn.net/qq_36151452/article/details/116193805
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。