2012-05-16 2 views
0

C'est la première question que j'ai posée ici, car normalement je peux trouver une réponse qui résoudra tous mes problèmes. Cependant, cette semaine, j'ai frappé tout le mur. J'utilise une toile sur ma page qui fonctionne très bien et qui peut être enregistrée en tant que fichier image. J'ai également créé un bouton qui va ouvrir le canevas dans une nouvelle fenêtre pour l'impression après avoir utilisé toDataURL. J'utilise le code ci-dessous:Impression d'un élément de canevas HTML5 de plusieurs pages

function printable() { 
    var dataUrl = document.getElementById("mainCanvas").toDataURL("image/png"); 
    var windowContent = '<!DOCTYPE html>'; 
    windowContent += '<head><title>Print Map</title></head>'; 
    windowContent += '<body>'; 
    windowContent += '<img src = "' + dataUrl + '">'; 
    windowContent += '</body>'; 
    windowContent += '</html>'; 
    var printWin = window.open('', '', width = 340, height = 260); 
    printWin.document.open(); 
    printWin.document.write(windowContent); 
    printWin.document.close(); 
    printWin.focus(); 
    printWin.print(); 
} 

Cela fonctionne très bien et ouvre le dialogue d'impression pour imprimer mon image de toile. Mon problème est que mon image est plus grande qu'une seule page et seule la première page de mon image est imprimée. Existe-t-il un moyen d'imprimer mon canevas sur plusieurs pages, ou dois-je craindre que la fonctionnalité de l'imprimante ne soit mauvaise et que mes utilisateurs doivent imprimer pour utiliser un programme différent après avoir enregistré leur canevas en local?

Merci

Répondre

0

il y a une solution stupide, mais certainement travailler.

Utilisez un script pour diviser le canevas et placez le contenu sur plusieurs canevas distincts.

utiliser ces fonctions:

ImageData getImageData(in float x, in float y, in float width, in float height); 
void putImageData(in ImageData imagedata, in float dx, double dy, in float dirtyX Optional , in float dirtyY Optional , in float dirtyWidth Optional , in float dirtyHeight Optional);