html2canvas saves high-definition pictures in divs (graphic tutorial)

1. Select the html2canvas version (this version can be enlarged to ensure clear images)

The default generated canvas image is very blurry on retina devices. Processing it into a 2x image can solve this problem:

var w = $("#code").width();
var h = $("#code").height();
//要将 canvas 的宽高设置成容器宽高的 2 倍
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");
//然后将画布缩放，将图像放大两倍画到画布上
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();
                //滚到顶部
                $('html, body').animate({scrollTop:0});
                if(confirm('是否下载肌肤检测报告？'))
                {
                    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");
//然后将画布缩放，将图像放大两倍画到画布上
                        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);
                                //生成base64图片数据
                                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;
                                };
                                // 加工image data，替换mime type
                                imgData = imgData.replace(_fixType(type),'image/octet-stream');
                                /**
                                 * 在本地进行文件保存
                                 * @param  {String} data     要保存到本地的图片数据
                                 * @param  {String} filename 文件名
                                 */
                                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);
                                };
                                // 下载后的问题名
                                var filename = aname+'肌肤检测报告' + (new Date()).getTime() + '.' + type;
                                // download
                                saveFile(imgData,filename);
                            },
                            width:1512,
                            height:15000
                        })
                    },2500)
                }
                else
                {
                    return;
                }
            })

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

HTML Implementing background image replacement

In-depth understanding of the basic usage of HTML5 Canvas tag

HTML5 video tag operation video detailed explanation

The above is the detailed content of html2canvas saves high-definition pictures in divs (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!