您的位置：首页 > 其它
div -> svg ->canvas -> 下载 (优化版)

2017-11-10 16:18 218 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下载</title>
<script src="jquery.min.js"></script>
</head>
<body>

<h2>Div的内容：</h2>
<div id="div" style="width: 300px;height: 200px;border: 1px solid #eee;">
<p>纤云弄巧，飞星传恨，银汉迢迢暗渡。</p>
<p>金风玉露一相逢，便胜却人间无数。</p>
<p>柔情似水，佳期如梦，忍顾鹊桥归路。</p>
<p>两情若是久长时，又岂在朝朝暮暮。</p>

</div>
<h2>生成图片:</h2>
<div id="imgBox">

</div>
<script>

/*
* 记录一个多文件下载方法（简单修改了下下）
*
* 参考:http://www.cnblogs.com/xiaofeixiang
* */
(function($) {
var methods = {
_download: function(options) {
var triggerDelay = (options && options.delay) || 100; // 触发延迟
var removeDelay = (options && options.removeDelay) || 1000;
if (options.source === "server") {
this.each(function(index, item) {
methods._createIFrame(item, index * triggerDelay, removeDelay);
});
};
if (options.source === "local") {
this.each(function(index, item) {
methods._createLink(item, index * triggerDelay, removeDelay);
});
};
},
_createIFrame: function(url, triggerDelay, removeDelay) {
//动态添加iframe，设置src，然后删除
setTimeout(function() {
var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');
frame.attr('src', url.src);
$(document.body).after(frame);
setTimeout(function() {
frame.remove();
}, removeDelay);
}, triggerDelay);
},
//download属性设置
_createLink: function(url, triggerDelay, removeDelay) {
var a = document.createElement('a');
a.setAttribute('download',url.name);
a.setAttribute('cursor','pointer');
a.setAttribute('id','img'+triggerDelay);
a.href=url.src;
document.body.appendChild(a);
var t = document.getElementById('img'+triggerDelay);
if (document.dispatchEvent) {
var o = document.createEvent('MouseEvents');
o.initMouseEvent('click', true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, t);
t.dispatchEvent(o)
} else if (document.fireEvent) {
t.fireEvent('onclick');
} else if (t.click()) {
t.click()
}
}
};
$.fn.multiDownload = function(options) {
methods._download.apply(this, arguments);
};
})(jQuery);
$(function() {

$("#download").click(function() {
var downloadUrl = [{name:"cross.png",src:'img/cross.png'},{name:"cross2.png",src:'img/cross2.png'},{name:"vis.css",src:'css/vis.css'}];
$(downloadUrl).multiDownload({"source":"local"});
});
});

// ---------------------开始------------------

//1.将div转成svg
var mydiv = document.getElementById("div");
var divW = parseInt(document.getElementById("div").style.width);
var divH = parseInt(document.getElementById("div").style.height);
var divContent = mydiv.innerHTML;
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='"+divW+"' height='"+divH+"'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
divContent +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;

if (img.complete) {

} else {
img.onload = function () { // 确保图片加载完成
console.log("img.onload");

console.log(img);
console.log(img.width);
document.getElementById('imgBox').appendChild(img);

//2.svg转成canvas
var canvas = document.createElement('canvas');  //准备空画布
if(!canvas.getContext) { G_vmlCanvasManager.initElement(canvas); }
canvas.width = img.width;
canvas.height = img.height;

var context = canvas.getContext('2d');  //取得画布的2d绘图上下文]
context.drawImage(img, 0, 0);

//    var image = new Image();
//    image.src = canvas.toDataURL("image/png");
//    document.getElementById('imgBox').appendChild(image);

//    var a = document.createElement('a');
//    a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
//     a.download = "图片";  //设定下载名称
//     a.click(); //点击触发下载
//    document.getElementById('imgBox').appendChild(a);
////    console.log(document.getElementsByTagName("a")[0]);
//    document.getElementsByTagName("a")[0].text = "点击下载图片";

//3. 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);

/** 将mime-type改为image/octet-stream，强制让浏览器直接download
* 获取mimeType
* @param  {String} type the old mime-type
* @return the new mime-type
*/
var _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};

// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type), 'image/octet-stream');

/**
* 在本地进行文件保存
* @param  {String} data     要保存到本地的图片数据
* @param  {String} filename 文件名
*/
var saveFile = function (data, filename) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;

var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};

// 下载后的图片名
var filename = 'my' + (new Date()).getTime() + '.' + type;

//    saveFile(imgData, filename);
var downloadUrl = [{name:filename,src:imgData}];
$(downloadUrl).multiDownload({"source":"local"});

img.onload = null;
};
img.onerror = function(){ // 图片加载错误！
console.log("img.onerror");

};
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航