Maison  >  Article  >  interface Web  >  Comment générer des images haute définition avec html2canvas

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

高洛峰
高洛峰original
2017-02-15 14:17:402420parcourir

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 !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:tri des balises HTMLArticle suivant:tri des balises HTML