Verwenden Sie JavaScript, um die Auflösung (DPI) von Canvas-Bildern zu ändern

Anwendungsszenario:

Das Lager muss Etiketten für jede Sendung drucken. Canvas kann Etiketten-JPG basierend auf den aus der Datenbank gelesenen Produktinformationen generieren, aber die Standardauflösung (DPI) dieses JPG-Bildes beträgt 72

Dieser DPI-Wert ist zu niedrig, wodurch das gedruckte Bild verschwommen wird.

Die übliche Methode zum Ändern des DPI-Werts besteht darin, das Bild auf den Server hochzuladen und C# zum Ändern des DPI-Werts zu verwenden und dann Laden Sie es auf den Server herunter

Aber ich bin sehr frustriert. Nur um eine kleine Markierung zu ändern (die DPI-Informationen sind nur ein Header-META im JPEG-Format). Laden Sie ein großes Bild auf den Server hoch.

Später habe ich die folgende Methode verwendet

JavaScript verwendet, um die DPI direkt zu ändern

Der Quellcode wird hier nicht veröffentlicht, es werden nur Lösungsideen bereitgestellt. Ich hoffe, es wird benötigt. Freunde versuchen es selbst

Jetzt wissen wir, dass DPI nur die Header-Informationen des JPEG-Formats sind, und es ist ein Sehr kleiner Teil, und Base64 ist eine Stream-Codierung, dann Canvas.toDataURL() und höher In der Base64-Zeichenfolge sollte auch die Position dieser DPI-Informationen festgelegt werden

Verwenden Sie eine Bildverarbeitung Programm (ich verwende Fireworks), um zwei JPG-Bilder mit demselben Inhalt zu generieren, ändern Sie nur die DPI, die DPI von Bild A beträgt 72 und die DPI von Bild B beträgt 300

Verwenden Sie zur Bestätigung UE zum Vergleichen Tatsächlich unterscheiden sich nur wenige Bytes im Header.

Verwenden Sie C#, um die A/B-Bilder zu lesen, sie jeweils in BASE64 zu kodieren und A.txt und B.txt zu generieren

Verwenden Sie UE oder andere Texteditoren, um die beiden Textdateien zu vergleichen und die unterschiedlichen Teile herauszufinden. Sie werden feststellen, dass sich nur weniger als 10 Zeichen in der Nähe des Kopfes unterscheiden.

Wiederholen Sie das obige Experiment mit verschiedenen Bildern , und Sie werden feststellen, dass die festen Zeichen am Ende immer unterschiedlich sind, und solange die DPI gleich ist, sind die festen Zeichen Die Zeichen an der Position sind auch gleich

Verwenden Sie canvas.toDataURL für Browser, um die Base64-Zeichen des JPG-Bildes zu generieren, und ändern Sie dann das Zeichen an der festen Position während des Tests in das charakteristische Zeichen mit einer DPI von 300

OK, jetzt haben Sie ein JPG-Bild mit einer DPI erhalten von 300.

Interessierte Freunde können die BASE64-Codierung studieren und dann eine Funktion erstellen, um die charakteristischen Zeichen zu berechnen, die verschiedenen DPIs entsprechen

Was die binären Zustände betrifft, klicken Sie mit dem Rechner darauf und Sie werden feststellen, dass es sich um den direkt gespeicherten DPI-Wert handelt

MEHR:

Im Bei den Projekten des Unternehmens sind die Bediener daran gewöhnt, jedes Mal unterschiedliche Bildstapel in einem festen Ordner zu speichern, und die von Canvas generierten Bilder werden separat gespeichert. Der Standarddateiname lautet immer „canvas.jpg“

Es wäre viel besser, wenn sie die gewohnte Chargennummer.jpg als Standarddateinamen zum Speichern verwenden würden

Hier gibt es zwei Möglichkeiten,

Gehen Sie zu Google, um eine Flash-Komponente namens downloadify zu finden. Sie können sicherstellen, dass beim Klicken auf die Schaltfläche „Herunterladen“ ein Popup-Fenster zur Auswahl des Speicherorts angezeigt wird und der Standarddateiname angegeben werden kann Verwenden von js

und Hinzufügen des HTML5-Download-Attributs zum A-Tag. Diese Lösung ist einfacher, aber Firefox/Chrome speichert sie direkt am Standard-Download-Speicherort und lässt den Benutzer nicht auswählen und mit der rechten Maustaste klicken Beim Speichern unter geht die Funktion des Standarddateinamens verloren

Beide Optionen haben ihre eigenen Vor- und Nachteile, abhängig von den Nutzungsgewohnheiten des Betreibers