jquery generates two-dimensional code and implements image download

1, the introduction of jquery two JS files

<script src= ". /scripts/erweima/jquery-1.10.2.min.js "></script><script type=" Text/javascript "src=". /scripts/erweima/jquery.qrcode.min.js "></script>

2. Prepare a div that shows the QR code

<div id= "Output" style= "margin:0px Auto" ></div>

3, generate two-dimensional code JS

$ ("#output"). empty (); JQuery (' #output '). QRCode ("QR code content");//QR code generation

The result of the two-dimensional code after generation

4. Two-dimensional code save

Since the two-dimensional code is generated after the use of H5 Canvas label display in the JSP page, so the QR code to save as a picture is also a lot of convenience. Canvas provides a method.

　　
function Download () {
var data = $ ("Canvas") [0].todataurl (). Replace ("Image/png", "image/octet-stream;"); /Gets the QR code value and modifies the response header.
var filename= "tupian.png";//Save the picture name and format, canvas default to use the PNG format. This format works best.    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);
}

　　

jquery generates two-dimensional code and implements image download