jquery.qrcode.min.js compatible with IE6

• Usage

<!-- QR code -->
<div id = "qrcode"></div>

// Render 2D Code
$(function() {
    var url = window.location.href;
    $("#qrcode").qrcode({
        render: "table", // Rendering methods are table and canvas
        width: 150,   //Default width
        height: 150, //Default height
        text: url, //QR Code Content
        typeNumber: -1,   //Computing mode generally defaults to -1
        correctLevel: 2, //Error Correction Level for 2D Code
        background: "#ffffff ", //Background color
        foreground: "#000000 "//QR Code Colors
    });
})

Problem Description

• The problem arises when you generate a QR code on the front end through jquery.qrcode.min.js and call window.print(); you need to print the QR code.
• Rendering methods are table and canvas. Canvas must be used in browsers that support canvas, such as Firefox, Google, IE9+ and other browsers that support canvas.
• On IE6 (canvas is not supported), table rendering also allows QR codes to be displayed on the page.However, through window.print(); the two-dimensional code cannot be displayed, and table rendering is to show each point by filling the background-color into the td.Because the browser ignores the background color when calling the print method.

Solution ideas

• To ensure proper use of IE6, divs can be added to the original td, using div's border-top border set to equal length and width to form each dot of the two-dimensional code, and the remaining border-left, border-right, border-bottom set to 0px.

Modified code

• gitee: https://gitee.com/jiangshaone...
• Here are just some of the modified code

// Here's what I've modified
......
c.width=h.width;c.height=h.height;
for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f<a.getModuleCount();f++)
    for(var i=0;i<a.getModuleCount();i++){
        d.fillStyle=a.isDark(f,i)?h.foreground:h.background;
        var g=Math.ceil((i+1)*b)-Math.floor(i*b),
        j=Math.ceil((f+1)*b)-Math.floor(f*b);d.fillRect(Math.round(i*b),Math.round(f*e),g,j)

    }}else{
        a=new o(h.typeNumber,h.correctLevel);
        a.addData(h.text);a.make();
        d=Math.floor(h.width/a.getModuleCount());b=Math.floor(h.height/a.getModuleCount());
        c=r("<table></table>").css("width",d*a.getModuleCount()+"px")
            .css("height",b*a.getModuleCount()+"px").
            css("border","0px")
            .css("border-collapse","collapse")
            .css("background-color",h.background);

        for(e=0;e<a.getModuleCount();e++){
            f=r("<tr></tr>").css("height",b+"px").appendTo(c);
            for(i=0;i<a.getModuleCount();i++){
                t=r("<td></td>").css("width",d+"px").css("height",d+"px").css("padding","0px").appendTo(f);
                // Add a div to the original td to display the color through the top border of the Div.
                r("<div></div>").css("border-width",d+"px")
                    .css("border-top",d+"px").css("border-bottom","0px")
                    .css("border-left","0px").css("border-right","0px")
                    .css("border-style","solid")
                    .css("border-top-color",a.isDark(e,i)?"black":"white").appendTo(t);
            }
        }
    }
......

summary

• In a web project, you can also generate a QR code picture in the background for use in the foreground.In this way, the above compatibility issues are not considered.
• Of course, I'm just thinking about using jquery.qrcode.min.js.Although it's a bit curvilinear.But it's still a problem in the absolute project.