js html生成图片

Posted 2021-03-25 1O(∩_∩)O1

我自己分装好的方法，外链自己去下：

/**
 *     !!!使用前请导入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);
}