HTML 2 canvas div to save high-definition image method example

Time:2019-8-7

This paper introduces an example of how HTML 2 canvas saves high-definition pictures in div, and shares it with you. The details are as follows:

Http://www.bootcdn.cn/(html2canvans can be searched)

1. Select the HTML 2 canvas version (this version can be magnified to ensure clear pictures)

Canvas images generated by default are very blurred on the retina device, which can be solved by processing them into two-fold images:

var w = $("#code").width();
var h = $("#code").height();

// Set the width of canvas to twice the width of the container
var canvas = document.createElement("canvas");
canvas.width = w * 2;
canvas.height = h * 2;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
// Then zoom the canvas and double the image onto the canvas.
context.scale(2,2);

html2canvas(document.querySelector("#code"), {
    canvas: canvas,
    onrendered: function(canvas) {
        ...
    }
});

Download method:

.on('click','.download',function(){
                $('#mycanvas').remove();
                var _height=$('.skinReport').height();
                // Roll to the top
                $('html, body').animate({scrollTop:0});

                If (confirm ('Do you download the skin test report? )
                {

                    setTimeout(function(){
                        var canvas = document.createElement("canvas"),
                            w=$('#skinReport').width(),
                            h=$('#skinReport').height();
                        canvas.width = w * 2;
                        canvas.height = h * 2;
                        canvas.style.width = w + "px";
                        canvas.style.height = h + "px";
                        var context = canvas.getContext("2d");
// Then zoom the canvas and double the image onto the canvas.
                        context.scale(2,2);
                        html2canvas(document.getElementById('skinReport'), {
                            allowTaint: false,
                            taintTest: true,
                            canvas: canvas,
                            onrendered: function(canvas) {
                                canvas.id = "mycanvas";
                                canvas.style.display = 'none';
                                document.body.appendChild(canvas);
                                // Generating Base64 Picture Data

                                imgData = canvas.toDataURL(type);
                                //var newImg = document.createElement("img");
                                //newImg.src =  dataUrl;
                                //document.body.appendChild(newImg);
                                //console.log(imgData);

                                var _fixType = function(type) {
                                    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                                    var r = type.match(/png|jpeg|bmp|gif/)[0];
                                    return 'image/' + r;
                                };
                                // Processing image data, replacing MIME type
                                imgData = imgData.replace(_fixType(type),'image/octet-stream');
                                /**
                                 * File saving locally
                                 *@ Param {String} data to save to local image data
                                 *@ Param {String} filename file name
                                 */
                                var saveFile = function(data, filename){
                                    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);
                                };

                                // Question name after download
                                Var filename = aname +'skin detection Report'+ (new Date (). getTime ()+'.' + type;
                                // download
                                saveFile(imgData,filename);
                            },
                            width:1512,
                            height:15000
                        })
                    },2500)
                }
                else
                {
                    return;
                }

            })

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.