html2canvas speichert hochauflösende Bilder in Divs (grafisches Tutorial)

亚连
Freigeben: 2018-05-18 16:00:06
Original
2740 Leute haben es durchsucht

1. Wählen Sie die html2canvas-Version (diese Version kann vergrößert werden, um klare Bilder zu gewährleisten)

Das standardmäßig generierte Canvas-Bild ist auf Retina-Geräten sehr unscharf. Die Verarbeitung in ein 2x-Bild kann dieses Problem lösen:

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) {
        ...
    }
});
Nach dem Login kopieren

Download-Methode:

.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;
                }
            })
Nach dem Login kopieren

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

HTML-Implementierung der Hintergrundbildersetzung

Detailliertes Verständnis der grundlegenden Verwendung von HTML5 Canvas Tag

Detaillierte Videoerklärung der HTML5-Video-Tag-Funktion

Das obige ist der detaillierte Inhalt vonhtml2canvas speichert hochauflösende Bilder in Divs (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!