Code de la méthode html2canvas pour enregistrer des images haute définition dans des divs

Cet article vous présente principalement des informations pertinentes sur la méthode de sauvegarde des images haute définition dans html2canvas. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. J'espère que cela aide tout le monde.

http://www.bootcdn.cn/ (vous pouvez rechercher html2canvans)

1 Sélectionnez la version html2canvas (cette version peut être agrandie pour garantir des images claires)

Généré par défaut L'image du canevas est très floue sur les appareils Retina. La traiter en une image 2x peut résoudre ce problème :

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) {
        ...
    }
});

Méthode de téléchargement :

.

.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;
                }

            })

Recommandations associées :

Comment développer l'applet WeChat ?

html2canvas Comment générer des images haute définition

php pour créer des images haute définition non déformées - Tutoriel code_PHP de mise en œuvre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!