Heutzutage gibt es viele Aktivitäten zum Betrieb öffentlicher WeChat-Konten, und es besteht die Notwendigkeit, Bilder zu generieren. Nachdem die Bilder generiert wurden, können sie an Freunde gesendet und in Moments verbreitet werden, was der Produktwerbung förderlich ist!
1. Sie können Canvas zum Generieren von Bildern verwenden. Da es jedoch bereits eine Open-Source-Bibliothek namens html2canvas gibt, habe ich sie aus Zeitgründen nicht selbst geschrieben.
Github-Adresse:html2canvas
Hören Sie auf zu schwafeln, schauen wir uns die Dinge zuerst an! ! !
LiveDemo
/** * Pixelverhältnis basierend auf window.devicePixelRatio*/ abrufen function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1; value to ist eine Ganzzahl*/ function parseValue(value) { return parseInt(value, 10 }; Zeichenfläche zeichnen */ async function drawCanvas (selector) { // Den DOM-Knoten abrufen, den Sie konvertieren möchten const dom = document.querySelector(selector); // Die berechnete Breite und Höhe des DOM-Knoten const width = parseValue(box.width); const height = parseValue(box.height); // Pixelverhältnis ermitteln const scaleBy = DPR(); Erstellen Sie ein benutzerdefiniertes Canvas-Element. var canvas = document.createElement('canvas'); // Setzen Sie die Breite und Höhe des Canvas-Elements auf die Breite und Höhe des DOM-Knotens. scaleBy; // Canvas-CSS-Breite und -Höhe auf DOM-Knotenbreite und -höhe setzen canvas.style.width = `${width}px`; `${height}px`; // Holen Sie sich den Pinsel const = canvas.getContext('2d'); // Vergrößern Sie den gesamten Zeichnungsinhalt um das Pixelverhältnis context.scaleBy, let y; = height; return waiting html2canvas(dom, {canvas}).then(function () { convertCanvasToImage(canvas, x,y) }) } /** * Bild in Base64-Format konvertieren*/ function convertCanvasToImage(canvas, x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; ) [0]; image.width = x; image.height = y; canvas.toDataURL(image/png); _body.removeChild(_container); document.body.appendChild(image } drawCanvas('.container');2. Da die heutigen Mobiltelefone alle über hochauflösende Bildschirme verfügen, treten Unschärfen auf, wenn Sie keine Verarbeitung durchführen. Warum tritt Unschärfe auf? Dies beinhaltet das Pixelverhältnis des Geräts. devicePixelRatio js stellt window.devicePixelRatio bereit, um das Pixelverhältnis des Geräts zu erhalten
function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1;Diese DPR-Funktion dient dazu, das Pixelverhältnis des Geräts zu ermitteln. Was sollten wir also tun, nachdem wir das Pixelverhältnis ermittelt haben?
var canvas = document.createElement('canvas'); // Setze die Breite und Höhe des Canvas-Elements auf die Breite und Höhe des DOM-Knotens Canvas Die CSS-Breite und -Höhe sind Breite und Höhe des DOM-Knotens. canvas.style.width = `${width}px`; Holen Sie sich den Pinsel const context = canvas.getContext('2d'); // Vergrößern Sie den gesamten Zeichnungsinhalt um das Pixelverhältnis context.scale(scaleBy, scaleBy);3. Nachdem Sie das Pixelverhältnis des Geräts erhalten haben, multiplizieren Sie „canvass.width“ und „canvas.height“ mit dem Pixelverhältnis des Geräts, das zu diesem Zeitpunkt „scaleBy“ ist, und setzen Sie „canvas.style.width“ und „canvas.style.height“ auf die Breite und Höhe des Geräts dom. Denken Sie darüber nach, warum schreiben Sie das? Beim Zeichnen schließlich wird der gezeichnete Inhalt um das Pixelverhältnis vergrößert
Beispielsweise beträgt die Breite und Höhe des iPhone 6S-Geräts 375 Wenn Sie es also eins zu eins zeichnen, wird es auf einem hochauflösenden Bildschirm verschwommen sein. Schauen Sie sich einfach das Bild an und erzählen Sie die Geschichte
6plus DPR=3
4. Rufen Sie abschließend canvas.toDataURL(image/png) auf. Weisen Sie den Wert image.src zu. Da Bilder nicht in WeChat gespeichert werden können, können Sie nur Bilddateien generieren und die WeChat-eigene Funktion zum Speichern von Bildern in Alben aufrufen. wie in der Abbildung gezeigt:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.