So generieren Sie hochauflösende Bilder mit html2canvas

Anforderung
Meine Anforderung besteht darin, einen Teil des HTML-Codes in ein Bild auf der mobilen Seite umzuwandeln, damit der Benutzer es speichern kann, sodass der vorherige Teil des HTML-Codes nicht angezeigt werden muss.

Normales Rendering
Bei normalem Rendern mit html2canvas ist die Anzeige auf dem Mobiltelefon sehr verschwommen. Der Code lautet wie folgt:

var dom = $("#id");

html2canvas(dom[0], {

canvas: canvas,

onrendered: function (canvas) {

$(dom).css("display", "none");

$(".img-container").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));

}

});

Im Beispiel wird auch das Plug-in „canvas2image.js“ verwendet, um die Leinwand in ein Bild umzuwandeln

Optimierung

var dom = $(".content-container .show-content");

var width = dom.width();

var height = dom.height();

var type = "png";

var scaleBy = 3;

var canvas = document.createElement('canvas');

canvas.width = width * scaleBy;

canvas.height = height * scaleBy + 35;

canvas.style.width = width * scaleBy + 'px';

canvas.style.height = height * scaleBy + 'px';

var context = canvas.getContext('2d');

context.scale(scaleBy, scaleBy);

context.font = 'Microsoft YaHei';

html2canvas(dom[0], {

canvas: canvas,

onrendered: function (canvas) {

var all_width = $(window).width();

$("#content-container").css("display", "none");

$(".img-container").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));

$(".img-container img").css("width", all_width + "px").css("height", "aotu");

}

});

Die Klarheit ist fast die gleiche wie beim ursprünglichen Dom. Die Klarheit ist die gleiche, aber die Gefahr besteht hier darin, dass die Position des Doms in der oberen linken Ecke beginnen muss, sonst rendert die gerenderte Leinwand auch den Abstand und das wird auch der Fall sein schwierig sein, damit umzugehen.

Weitere Informationen zum Generieren hochauflösender Bilder mit html2canvas finden Sie auf der chinesischen PHP-Website für verwandte Artikel!