js div 轉canvas 場景出圖

代碼

參考博客 JS實現將div生成高清圖片並保存本地 https://blog.csdn.net/qq_42583562/article/details/87755493

//div出圖 需引入 html2canvas.js  下載地址 http://html2canvas.hertzen.com/
function exportDivAsPNG(divname,pngname){
    //創建一個新的canvas
    var tempCanvas = document.createElement("canvas");
    let tempDiv = document.querySelector(('#'+divname));
    var w = parseInt(window.getComputedStyle(tempDiv).width);
    var h = parseInt(window.getComputedStyle(tempDiv).height);
    //將canvas畫布放大若干倍，然后盛放在較小的容器內，就顯得不模糊了
    tempCanvas.width = w * 2;
    tempCanvas.height = h * 2;
    tempCanvas.style.width = w + "px";
    tempCanvas.style.height = h + "px";
    //可以按照自己的需求，對context的參數修改,translate指的是偏移量
    //  var context = canvas.getContext("2d");
    //  context.translate(0,0);
    var context = tempCanvas.getContext("2d");
    context.scale(0, 0);
    html2canvas(document.querySelector(('#'+divname)), { canvas: tempCanvas }).then(function(canvas) {
    var MIME_TYPE = "image/png";
    var imgURL = canvas.toDataURL(MIME_TYPE);
    var dlLink = document.createElement('a');
    dlLink.download = pngname;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
    });
    };
    
//得到當前時間字符串，格式為：YYYY-MM-DD HH:MM:SS    
function curentTimeString() {   
    var now = new Date();    
    var year = now.getFullYear();       //年  
    var month = now.getMonth() + 1;     //月  
    var day = now.getDate();            //日      
    var hh = now.getHours();            //時  
    var mm = now.getMinutes();          //分  
    var ss=now.getSeconds();            //秒    
    var clock = year + "-";    
    if(month < 10) clock += "0";         
    clock += month + "-";    
    if(day < 10) clock += "0";   
    clock += day + " ";  
    if(hh < 10) clock += "0";  
    clock += hh + ":";  
    if (mm < 10) clock += '0';   
    clock += mm+ ":";      
    if (ss < 10) clock += '0';   
    clock += ss;  
    return(clock);   
    }; 
    //使用方式
    exportDivAsPNG('mapDiv',curentTimeString());

效果