js html生成圖片

我自己分裝好的方法，外鏈自己去下：

/**
 *     !!!使用前請導入jq文件!!!
           海報生成,
           二維碼鏈接生成
 */

document.write('<script src="/Public/static/qrcode.js" type="text/javascript" charset="utf-8"></script>');
document.write('<script src="/Public/static/html2canvas.js" type="text/javascript" charset="utf-8"></script>');

var scroll;

/**
 * 生成二維碼
 * @param id    容器的id,
 * @param link  網站鏈接
 * @param w     二維碼寬度
 * @param h     二維碼高度
 * @returns {Promise<any>}
 */
function code(id, link, w=128, h=128) {
    
        return new Promise((resolve, reject)=>{
            
            var qrcode = new QRCode(id, {
                text: link,
                width: w,
                height: h,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
            });

           if (qrcode._oQRCode == null)
           {
               reject(true);
           }else {
               resolve(false);
           }
        })
}


/**
 * 生成海報
 * @param selector  jq的選擇器: #id | .class | 標簽名稱
 * @returns {Promise<any>}
 */
function pister(selector) {
    //直接選擇要截圖的dom，就能截圖，但是因為canvas的原因，生成的圖片模糊
    //html2canvas(document.querySelector('div')).then(function(canvas) {
    //    document.body.appendChild(canvas);
    //});
    //創建一個新的canvas
    return new Promise( (resolve, reject) => {

        var canvas2 = document.createElement("canvas");

        let _canvas = document.querySelector(selector);
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //將canvas畫布放大若干倍，然后盛放在較小的容器內，就顯得不模糊了
        canvas2.width = w;
        canvas2.height = h;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";
        canvas2.dpi=window.devicePixelRatio * 4;
        //可以按照自己的需求，對context的參數修改,translate指的是偏移量，scale是對繪圖進行縮放，所有之后的繪圖也會被縮放。定位也會被縮放。如果您 scale(2,2)，那么繪圖將定位於距離畫布左上角兩倍遠的位置。
        var context = canvas2.getContext("2d");
        let hy = _canvas.offsetTop;
        if (typeof scroll != "number")
        {
            scroll = 0;
        }
        var shy = hy - scroll;


         context.translate(0,-shy);
        // context.scale(2, 2);

        html2canvas(_canvas, { canvas: canvas2 }).then(function(canvas) {
            //document.body.appendChild(canvas);
            //canvas轉換成url，然后利用a標簽的download屬性，直接下載，繞過上傳服務器再下載
            // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
            var url = canvas.toDataURL();
            if (url != undefined)
            {
                resolve(url);
            }else {
                reject(false);
            }
        });
    })
}



 window.onscroll = function() {//為了保證兼容性，這里取兩個值，哪個有值取哪一個　　
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //scrollTop就是觸發滾輪事件時滾輪的高度
     scroll = scrollTop;
}

/**
 * @param code_id       放二維碼的id（任意標簽）
 * @param link          二維碼跳轉網址
 * @param selector      你要生成圖片的html的id
 * @param img_selector  海報img標簽的id
 * @constructor
 */
function Person(code_id, link, selector, img_selector) {
    this.code_id = code_id;
    this.link = link;
    this.selector = selector;
    this.img_selector = img_selector;
}

/**
 * @param w  二維碼的寬度
 */
function setCodeWidth(w) {
    Person.prototype.CodeWidth = w;
}


/**
 * @param h  二維碼的高度
 */
function setCodeHeight(h) {
    Person.prototype.CodeHeight = h;
}


/**
 * 二維碼海報
 * @param Person
 */
function codePister(Person) {
    //二維碼生成
    var timea = setTimeout(() => {
        var w,h;
        if (Person.CodeWidth != undefined)
        {
             w = Person.CodeWidth;
        }else {
             w = document.documentElement.clientWidth * 0.2;
        }

        if (Person.CodeHeight != undefined)
        {
            h = Person.CodeHeight;
        }else {
            h = document.documentElement.clientWidth * 0.2;
        }

        if ($('#'+Person.code_id).children('img').length > 0)
        {
            $('#'+Person.code_id).children('img')[0].remove();
        }
        code(Person.code_id,Person.link,w,h);
        clearTimeout(timea);
    }, 50);


    //圖片生成
    var timeb = setTimeout(() => {
        pister("#"+Person.selector).then((src)=>{
            // console.log(src);
            $('#'+Person.img_selector).attr('src',src)
        }).catch((msg)=>{
            console.log(msg);
        });
        clearTimeout(timeb);
    },500);
}


/**
 * 二維碼海報(推薦)
 * @param Person
 */
function notice(Person) {
    var timea = setTimeout(() => {
        var w,h;
        if (Person.CodeWidth != undefined)
        {
            w = Person.CodeWidth;
        }else {
            w = document.documentElement.clientWidth * 0.2;
        }

        if (Person.CodeHeight != undefined)
        {
            h = Person.CodeHeight;
        }else {
            h = document.documentElement.clientWidth * 0.2;
        }

        $('#'+Person.code_id).children().remove();
        code(Person.code_id,Person.link,w,h).then( (co) => {

            pister("#"+Person.selector).then((cod)=>{
                $('#'+Person.img_selector).attr('src',cod)
            }).catch((msg)=>{
                console.log(msg);
                console.log('海報生成失敗');
            });

        }).catch( (er) => {
            console.log('二維碼生成失敗');
        } );
        clearTimeout(timea);
    }, 50);
}