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

Exigences
Mon exigence est de convertir un morceau de HTML en une image sur la page mobile afin que l'utilisateur puisse l'enregistrer, de sorte que le morceau de HTML précédent n'ait pas besoin d'être affiché.

Rendu normal
En utilisant html2canvas pour un rendu normal, l'affichage sur le téléphone mobile est très flou. Le code est le suivant :

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));

}

});

Dans l'exemple, le plug-in canvas2image.js est également utilisé pour convertir le canevas en image

Optimisation

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");

}

});

La clarté est presque la même que celle du dom d'origine. La clarté est la même, mais le piège ici est que la position du dom doit commencer dans le coin supérieur gauche, sinon le canevas rendu restituera également l'espacement et il le fera. être difficile à gérer.

Pour en savoir plus sur html2canvas sur la façon de générer des images haute définition, veuillez faire attention au site Web PHP chinois pour les articles connexes !