Question

Ich habe eine HTML5 Leinwand (3000px x 3000px). Ich bin die folgende Funktion mit der Leinwand drucken:

function printCanvas() 
{ 
    popup = window.open(); 
    popup.document.write("<br> <img src='"+canvas.toDataURL('png')+"'/>"); 
    popup.print(); 
} 

Das Problem ist, wenn ich auf der Leinwand nur Element haben (zB einen Kreis), und drücken Sie drucken, wird es versuchen, aus der gesamten Leinwand zu drucken (3000 x 3000). Gibt es eine Möglichkeit, es zu ändern, so dass es nur einen bestimmten Abschnitt der Zeichenfläche oder nur den Teil druckt, wo es Elemente gibt, und keinen Leerraum ausdrucken.

Danke.

Answer 1

Die andere Antwort beschreibt richtigen Ansatz. Das Hauptproblem besteht darin, Grenzen zu finden. Ich bekomme alle Bilddaten und in zwei for-Schleifen finden Grenzen:

function getCanvasBorders(canvas) { 
    var topleft = {x: false, y: false}; 
    var botright = {x: false, y: false}; 

    for(var x = 0; x < canvas.width; x++) { 
    for(var y = 0; y < canvas.height; y++) { 
     if(!emptyPixel(context, x, y)) { 
     if(topleft.x === false || x < topleft.x) { 
      topleft.x = x; 
     } 
     if(topleft.y === false || y < topleft.y) { 
      topleft.y = y; 
     } 
     if(botright.x === false || x > botright.x) { 
      botright.x = x; 
     } 
     if(botright.y === false || y > botright.y) { 
      botright.y = y; 
     } 
     } 
    } 
    } 

    return {topleft: topleft, botright: botright}; 
} 

SO Schnipsel kann nicht mit document arbeiten, so ist hier ein jsfiddle.

Answer 2

Angenommen, Sie haben einen Weg zu verfolgen und die Objekte neu zu zeichnen, können Sie wie folgt vorgehen:

1. die max Grenzen berechnen, dass alle Objekte
2. Erstellen Sie eine neue Leinwand, um die Größe dieses gebunden enthalten
3. Zeichnen Sie in der Region die Grenze darstellt mit drawImage() mit seinen Clipping-Parameter, aber Offset-X und -y der gebundenen Startposition.

Drucken Sie stattdessen die temporäre Leinwand.

Update: Um Kanten des Bildinhalts zu finden, unter der Annahme, Transparenz für den Hintergrund, siehe this answer.