Est-il possible d'imprimer uniquement l'élément canvas?

J'ai créé une page Web qui vous permet de saisir des informations puis de dessiner une image dans un élément de canevas basé sur cette information. Je l'ai à peu près comme je le veux sauf pour l'impression.Est-il possible d'imprimer uniquement l'élément canvas?

Existe-t-il un moyen d'imprimer l'élément canvas ou de créer une nouvelle fenêtre à dessiner, la seule façon de le faire?

Mise à jour:

La réponse était si simple. Je pensais à une solution beaucoup plus compliquée.

J'aimerais pouvoir choisir plus d'une réponse. Je n'ai pas réussi à imprimer la toile lorsque j'ai utilisé * pour désactiver l'affichage. La solution la plus simple consistait simplement à désactiver le formulaire que j'utilisais pour l'entrée, en utilisant form {display: none;} dans le CSS dans un @media print {}. Merci pour la réponse rapide.



    @media print { 
      form { 
     display:none; 
     } 
    }

Source

2008-10-05 bruceatk

Vous pouvez essayer quelque chose comme ceci:

@media print { 
    * { 
    display:none; 
    } 

    #SOME-CANVAS-ID { 
    display:block; 
    } 
}

Je ne suis pas sûr si une toile est bloc par défaut , mais vous pourriez essayer quelque chose comme ça et voir si cela fonctionne. L'idée est de cacher tout (*) pour les supports d'impression, à l'exception de tout autre élément arbitraire tant que la priorité de la règle est plus élevée (c'est pourquoi j'ai utilisé le sélecteur d'ID).

Edit: Si CSS3 (en particulier le negation pseudo-class) avait plus de soutien, votre règle pourrait être aussi simple que cela:

*:not(canvas) { 
    display:none; 
}

Cependant, cela peut entraîner la <html> et <corps> balises pour être caché , cachant efficacement votre toile et ...

Source

2008-10-05 18:10:58

Je sais que Safari supporte: not(), je serais stupéfait si Opera ne le fait pas, et je crois que firefox trunk le supporte (je ne sais pas à propos de Firefox 3.0) - Et étant donné qu'ils sont le navigateur qui supporte réellement le Canvas élément qui devrait être suffisant: D – olliej

http://www.css3.info/selectors-test/test.html affirme que tous les 3 ne supportent pas - donc si vous utilisez canvas,: not() est bien. – olliej

Je ne suis pas sûr à 100% du support, mais vous pouvez utiliser CSS et de mettre un attribut dans la balise <link> pour media="print". Dans ce fichier CSS, juste cacher les éléments que vous ne voulez pas montrer lors de l'impression: display:none;

Source

2008-10-05 18:10:34

Vous pouvez essayer de créer une toile juste pour l'impression:

this.Print = function() { 
    var printCanvas = $('#printCanvas'); 
    printCanvas.attr("width", mainCanvas.width); 
    printCanvas.attr("height", mainCanvas.height); 
    var printCanvasContext = printCanvas.get(0).getContext('2d'); 
    window.print(); 
}

Source

2012-11-23 15:19:20 Dedan

Est-il possible d'imprimer uniquement l'élément canvas?

Répondre

Questions connexes