其实这是一个伪需求,因为html2canvas就有详细介绍,只不过自己亲自实验了,觉得还行
使用
构造一个html文件
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 200px;
height: 40px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: 40px;
text-align: center;
}
</style>
<div class="main">
<p>html2canvas</p>
<button onclick="copy()">下载</button>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/html2canvas.min.js"></script>
js
//截图
var _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
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);
};
function copy() {
html2canvas($("body"), { // $(".myImg")是你要复制生成canvas的区域,可以自己选
onrendered: function (canvas) {
var type = 'png';
imgData = canvas.toDataURL(type);
// $("body").append(canvas);
// 加工image data,替换mime type
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData, filename);
//下载图片
// $('#down_button').attr('href', dataURL);
// $('#down_button').attr('download', 'myjobdeer.png');
},
width: 320,
height: 400
})
}