De nos jours, il existe de nombreuses activités d'exploitation de comptes publics WeChat, et il est nécessaire de générer des images une fois générées, elles peuvent être envoyées à des amis et diffusées dans Moments, ce qui est propice à la promotion des produits !
1. Vous pouvez utiliser Canvas pour générer des images, mais comme il existe déjà une bibliothèque open source appelée html2canvas, je ne l'ai pas écrite moi-même afin de gagner du temps.
adresse github : html2canvas
Arrêtons de divaguer et regardons les choses d’abord ! ! !
Démo en direct
/** * Obtenez le rapport de pixels basé sur window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1 } /** * Convertissez le rapport entrant; la valeur à est un entier*/ function parseValue(value) { return parseInt(value, 10 } /** *); Draw Canvas */ async function drawCanvas (selector) { // Obtenez le nœud DOM que vous souhaitez convertir const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); Nœud DOM const width = parseValue(box.width); const height = parseValue(box.height); // Obtenez le rapport de pixels const scaleBy = DPR( //); Créez un élément de canevas personnalisé var canvas = document.createElement('canvas'); // Définissez la largeur et la hauteur de l'attribut de l'élément de canevas sur la largeur et la hauteur du nœud DOM * rapport en pixels canvas.width = width * scaleBy; scaleBy; //Définit la largeur et la hauteur du CSS du canevas sur la largeur et la hauteur du nœud DOM canvas.style.width = `${width}px`; `${height}px`; // Récupère le pinceau const context = canvas.getContext('2d'); // Agrandit tout le contenu du dessin par rapport aux pixels context.scale(scaleBy, scaleBy); = hauteur; return wait html2canvas(dom, {canvas}).then(function () { convertCanvasToImage(canvas, x,y) }) } /** * Convertir l'image au format base64*/ function convertCanvasToImage(canvas, x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; ) [0]; image.largeur = x; image.hauteur = y image.src = canvas.toDataURL(image/png); _body.removeChild(_container); document.body.appendChild(image); return image;2. Étant donné que les téléphones mobiles d’aujourd’hui sont tous dotés d’écrans haute définition, un flou apparaîtra si vous n’effectuez aucun traitement. Pourquoi un flou se produit-il ? Cela implique le rapport de pixels de l'appareil. devicePixelRatio js fournit window.devicePixelRatio pour obtenir le rapport de pixels de l'appareil.
function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1 ;Cette fonction DPR consiste à obtenir le rapport de pixels de l'appareil. Que devons-nous faire après avoir obtenu le rapport de pixels ?
var canvas = document.createElement('canvas'); // Définit la largeur et la hauteur de l'attribut de l'élément de canevas sur la largeur et la hauteur du nœud DOM * rapport en pixels canvas.width = width * scaleBy; canvas.height = height * scaleBy; canvas La largeur et la hauteur CSS sont la largeur et la hauteur du nœud DOM canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; Récupère le pinceau const context = canvas.getContext('2d'); // Agrandit tout le contenu du dessin par rapport en pixels context.scale(scaleBy, scaleBy);3. Après avoir obtenu le rapport de pixels de l'appareil, multipliez canvass.width et canvas.height par le rapport de pixels de l'appareil, qui est scaleBy à ce moment-là, définissez canvas.style.width et canvas.style.height sur la largeur et la hauteur du périphérique. Dom. Pensez-y, pourquoi écrivez-vous cela ? Enfin, lors du dessin, le contenu dessiné est agrandi selon le ratio de pixels
Par exemple, la largeur et la hauteur de l'appareil iPhone 6S sont de 375 Donc, si vous le dessinez un à un, il sera flou sur un écran haute définition. Regardez simplement l'image et racontez l'histoire.
6plus DPR=3
4. Enfin, appelez canvas.toDataURL(image/png) ; attribuez la valeur à image.src. Étant donné que les images ne peuvent pas être enregistrées dans WeChat, vous pouvez uniquement générer des fichiers image et appeler la fonction d'appui long de WeChat pour enregistrer les images dans des albums. montré sur la figure :
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.