Beispiele für Leinwandkomprimierungsbilder und Kartenherstellungsmethoden

Beim Erstellen mancher Aktivitätsseiten ist es häufig erforderlich, Bilder hochzuladen. Die Bilder, der generierte Text und die Aufkleber müssen auch in einer Karte generiert werden, auf die Benutzer lange drücken können, um sie zu speichern. Diese Anforderung wurde bereits einmal erfüllt und kürzlich erneut erfüllt. Alles wurde mithilfe von Canvas umgesetzt. Habe einfach einen Blog erstellt. Wenn es eine bessere Umsetzungsmethode gibt, können Sie diese gerne gemeinsam besprechen.

Wenn Sie das Schreibeingabe-Tag in HTML verwenden und der Typ „Datei“ ist, können Sie das Fotoalbum Ihres Telefons aufrufen, um Fotos auszuwählen, und Sie können auch die Kamera beim Aufnehmen von Fotos unterstützen. In diesem Szenario ist das Bild möglicherweise größer und überschreitet möglicherweise den vom Backend unterstützten maximalen Bereich, was dazu führt, dass der Upload fehlschlägt.

 <Eingabe-ID=Dateityp=Datei>

1. Holen Sie sich zuerst die Bilddatei

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(file) // Die ausgewählte Datei ist ein Bild if (file.type.indexOf(image) == 0) { reader.readAsDataURL(file } });

2. Nachdem Sie nun die Bilddatei erhalten haben, müssen Sie die Verwendung des FileReader-Objekts in js verstehen.

FileReader-Objekte ermöglichen Webanwendungen das asynchrone Lesen des Inhalts einer Datei (oder eines Rohdatenpuffers), die auf dem Computer des Benutzers gespeichert ist

Verfahren:

• readAsText: Diese Methode verfügt über zwei Parameter. Der zweite Parameter ist die Codierungsmethode des Texts und der Standardwert ist UTF-8. Diese Methode ist sehr einfach zu verstehen. Die Datei wird im Textmodus gelesen und das Leseergebnis ist der Inhalt der Textdatei.
• readAsBinaryString: Diese Methode liest die Datei als binäre Zeichenfolge. Normalerweise übertragen wir sie an das Backend, und das Backend kann die Datei über diese Zeichenfolge speichern.
• readAsDataURL: Dies ist die Methode, die im Beispielprogramm verwendet wird. Diese Methode liest die Datei als Zeichenfolge, beginnend mit data:. Die Daten-URL ist eine Möglichkeit, kleine Dateien direkt in das Dokument einzubetten. planen. Mit kleinen Dateien sind hier normalerweise Dateien in Formaten wie Bildern und HTML gemeint. (Daraus ergibt sich die Base64-Methode.)

Nachdem Sie das Bild erhalten haben, müssen Sie die Datei zu diesem Zeitpunkt verarbeiten und konvertieren

 var reader = new FileReader(); //Liest die Datei in der Form von Daten-URL ein readAsDataURL(file) { console.log(reader) }

Nachdem das Bild nun abgerufen und konvertiert wurde, kann es nun komprimiert werden.

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // Die ausgewählte Datei ist ein Bild if (file.type.indexOf(image) == 0) { var reader = new FileReader(); Konvertieren Sie die Datei in Data Lesen Sie die Seite in Form von URL: readAsDataURL(file); this.result ) canvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL komprimiert durch Canvas] * @params path Das Base64-Format des Bildes* @params targetWidth Die Breite des komprimierten Bildes* @params quality Je kleiner der Bildqualitätswert, desto unschärfer wird das gezeichnete Bild*/ function canvasDataURL(path, targetWidth, quality) { var img = new Image(); img.src = path img.onload = function () { // var that = this // console.log(that) // Standardmäßige proportionale Komprimierung var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / scale var qualität = qualität; // Leinwand generieren var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // Attributknoten erstellen var anw = document.createAttribute(width). document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anh); desto besser Je unschärfer das gezeichnete Bild ist var base64 = canvas.toDataURL('image/jpeg', quality); result=document.getElementById(result); result.setAttribute(src, base64) } }

Es ist sehr einfach, sodass Sie das komprimierte Bild erhalten können. Aus dem obigen Code können wir erkennen, dass das Prinzip darin besteht, dass die toDataURL-Methode in Canvas das Format und die Komprimierungsqualität des komprimierten Bildes angeben und die Canvas-Informationen komprimieren und konvertieren kann zur Base64-Komprimierung.

Szene: Kombinieren Sie das gerade komprimierte Bild mit einem anderen Bild und drücken Sie lange, um es zu speichern.

 function drawCanvas (target) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // Es sind die physischen Pixel auf dem Gerät und geräteunabhängige Pixel (Dips) Verhältnis var dp = window.devicePixelRatio ||. 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||. ctx.mozBackingStorePixelRatio ||. ctx.oBackingStorePixelRatio ||. ctx.backingStorePixelRatio || oldWidth * Verhältnis canvas.height = oldHeight * Verhältnis canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(ratio, ratio) var headerImg = new Image() var bgImg = new Image() headerImg.src = target bgImg.src = '../bg.png' headerImg.onload = (e) => { // Seitenverhältnis des Bildes var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate )) // Hintergrundbild ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Awesome', 80, 70) var resultImg = new Image() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document . getElementById(cardImg); cardImg.setAttribute(src, resultImg.src) } }

Holen Sie sich das gerade erhaltene Bild und zeichnen Sie es nach dem Laden auf die Leinwand. Sie können auch Text usw. hinzufügen. Schließlich werden die Leinwandinformationen zur Implementierung in Base64-Kodierung konvertiert. Beispiele können durch Code geübt werden

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.