Höhere DPI-Grafiken mit HTML5-canvas

Gibt es eine Möglichkeit, um eine benutzerdefinierte DPI/PPI beim erstellen eines Abbilds mit dem HTML5 canvas-Element? Ich weiß, wie kann ich das zeichnen auf den canvas-Bereich, und exportieren Sie es als Bild, aber wie kann ich sicherstellen, dass der output-Bild ist von bestimmten DPI/PPI. Ich denke, mit SVG-elemnts zu ziehen auf der Leinwand ist eine Möglichkeit, aber wäre das nicht abgeflacht, wenn ich exportieren Sie die gesamte Leinwand wie ein Bild? Oder berechnen Sie das Gerät DPI und dann skalieren Sie das Bild, um mein DPI Anforderung, aber das scheint nicht die richtige Lösung.

InformationsquelleAutor redGREENblue | 2013-01-23

  1. 3

    Können Sie nicht (pfui) Zugriff auf die DPI-Anzeige der aktuellen web-Seite in einem beliebigen browser:

    Die Erkennung der system DPI/PPI von JS/CSS?

    Für den Druck: Sie wahrscheinlich nicht den DPI-Wert der exportierten <canvas> Bild (PNG, JPEG) mit browser-standard-Funktionen. Jedoch, wenn Sie eine Reine Javascript-encoder Bild-encoder sind Sie frei, erstellen Sie jede Art von Binär-Datei, die Sie möchten, und manuelles einstellen der DPI-Wert embedded int er binäre.

    https://gist.github.com/1245476

    Hmmm. Ich Blick in die JS-encoder-Lösung.Danke.
    Besser als eine ganze encoder für die PNG - /JPEG, nutzen Sie die nativen encoder, dann schreiben Sie die bytes in der Kopfzeile definieren, dass die pixel-Dichte von Metadaten. In PNG ist es die pHYs-chunk [injiziert werden muss durch die Umwandlung der Leinwand, um einen blob, und schneiden das Stück in], und im JPEG-es ist einfacher als Sie müssen nur umschreiben bits 13-16.
    Diese Antwort ist nicht mehr korrekt. window.devicePixelRatio gibt Sie die DPI.
    href="https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio" >window.devicePixelRatio nicht die DPI, es gibt einen Wert, wie 1 oder 2 angibt, das Verhältnis der physikalischen Pixel in CSS-Pixel (D. H. für Retina-displays).
    DPI spielt keine Rolle, für Bilder, die Sie in Pixel gemessen werden. DPI/PPI ist rein willkürlich (ein 100x100 Bild ist 100x100 bei 72 DPI als auch 300 DPI).

    InformationsquelleAutor Mikko Ohtamaa

  2. 40

    Leinwände haben zwei unterschiedliche 'Größen': Ihre-DOM-Breite/Höhe und deren CSS Breite/Höhe. Sie können zu erhöhen eine Leinwand " Auflösung durch die Erhöhung der DOM-Größe, während die CSS Größe fixiert, und dann mit Hilfe der .scale () - Methode zu skalieren alle Ihre zukünftigen zieht, um das neue größere Größe. Hier ist ein Beispiel:

    function changeResolution(canvas, scaleFactor) {
    //Set up CSS size.
    canvas.style.width = canvas.style.width || canvas.width + 'px';
    canvas.style.height = canvas.style.height || canvas.height + 'px';

    //Resize canvas and scale future draws.
    canvas.width = Math.ceil(canvas.width * scaleFactor);
    canvas.height = Math.ceil(canvas.height * scaleFactor);
    var ctx = canvas.getContext('2d');
    ctx.scale(scaleFactor, scaleFactor);
}

    Canvas Standardauflösung ist 96 dpi (CSS Zoll, nicht basierend auf dem tatsächlichen Bildschirm). So einen scaleFactor von 2 gibt 192dpi, 3 288dpi, etc. In der Tat, hier ist eine version, die sollte Ihre gewünschte DPI:

    function setDPI(canvas, dpi) {
    //Set up CSS size.
    canvas.style.width = canvas.style.width || canvas.width + 'px';
    canvas.style.height = canvas.style.height || canvas.height + 'px';

    //Resize canvas and scale future draws.
    var scaleFactor = dpi / 96;
    canvas.width = Math.ceil(canvas.width * scaleFactor);
    canvas.height = Math.ceil(canvas.height * scaleFactor);
    var ctx = canvas.getContext('2d');
    ctx.scale(scaleFactor, scaleFactor);
}

    Spaß haben! Beachten Sie, dass diese beiden code-Beispiele können nur einmal verwendet werden pro Leinwand, übernehmen Sie die aktuelle DOM-Größe ist das original (Sie können optimiert werden, um das zu ändern). Auch die Skalierung muss passieren vor Sie eine Zeichnung auf der Leinwand. Dank dieser Beitrag für die Methode und die Informationen!

    Edit: Hier ist eine robustere Funktion, die scale-Zukunft zieht und pflegen bestehende canvas-Inhalte. Diese kann aufgerufen werden, um neu skalieren, mehrere Male.

    function setDPI(canvas, dpi) {
    //Set up CSS size.
    canvas.style.width = canvas.style.width || canvas.width + 'px';
    canvas.style.height = canvas.style.height || canvas.height + 'px';

    //Get size information.
    var scaleFactor = dpi / 96;
    var width = parseFloat(canvas.style.width);
    var height = parseFloat(canvas.style.height);

    //Backup the canvas contents.
    var oldScale = canvas.width / width;
    var backupScale = scaleFactor / oldScale;
    var backup = canvas.cloneNode(false);
    backup.getContext('2d').drawImage(canvas, 0, 0);

    //Resize the canvas.
    var ctx = canvas.getContext('2d');
    canvas.width = Math.ceil(width * scaleFactor);
    canvas.height = Math.ceil(height * scaleFactor);

    //Redraw the canvas image and scale future draws.
    ctx.setTransform(backupScale, 0, 0, backupScale, 0, 0);
    ctx.drawImage(backup, 0, 0);
    ctx.setTransform(scaleFactor, 0, 0, scaleFactor, 0, 0);
}
    Diese Antwort sollte sein markiert als richtige Antwort. Nur Problem hier ist, gibt es keine Möglichkeit, exportieren Sie diese Leinwand mit DPI konfiguriert, so dass nach dem Aufruf toDataUrl Bild Maße Folgen würde, scaleFactor, aber die Auflösung der PNG-Bild wäre immer noch 96 (or equals to-device-DPI). Funktion-export als Bild in hoher Auflösung toDataURLHD zur Verfügung stehen würde, als Teil von HTML5.1, für jetzt PNG Auflösung kann nur geändert werden, auf dem server. Gutes Beispiel, wie Bild skalieren auf server mit C# mit ändern der Auflösung finden Sie hier stackoverflow.com/questions/1922040/resize-an-image-c-sharp.
    "Sie könnten optimiert werden, um das zu ändern" - wie?
    Hey @Zac, ich habe ein Beispiel, das mehrmals aufgerufen werden kann und wird bewahren, canvas-Inhalte.

    InformationsquelleAutor Erik Koopmans

  3. 1

    Wenn Sie nur wollen, um den dpi-Wert der PNG-Datei (also nicht die Steigerung der Anzahl der Pixel) werden dann mit dieser Bibliothek können Sie die pHYs chunk (unter anderem):

    https://github.com/imaya/CanvasTool.PngEncoder

    Minimal-Beispiel so exportieren Sie eine HTML5-Leinwand, um base64-kodierte PNG:

            //convert dots per inch into dots per metre
        var pixelsPerM = dpi * 100 / 2.54;

        var param = {
            bitDepth : 8,
            colourType : 2,
            filterType : 0,
            height : canvas.height,
            interlaceMethod : 0,
            phys : {
                unit : 1,
                x : pixelsPerM,
                y : pixelsPerM
            },
            width : canvas.width
        };

        var array = canvas.getContext('2d').getImageData(0, 0, canvas.width,
                canvas.height).data;

        var png = new window.CanvasTool.PngEncoder(array, param).convert();

        var base64 = 'data:image/png;base64,' + btoa(png);

    InformationsquelleAutor murkle

Schreibe einen Kommentar