html2canvas 保存图片

版权声明：本文为博主原创文章，非商业转载请附上地址与作者信息，谢谢！ https://blog.csdn.net/jx950915/article/details/82414544

其实这是一个伪需求，因为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
   })
}