Html5 canvas image base64 vide, pourquoi ?

a marqué ce sujet comme résolu.

Bonjour à tous,

Je viens demander votre aprés plusieurs heures de test en vain.

Pour m’entrainer sur canvas j’essaye de générer un pdf hd (300 dpi) de mon canvas. Après m’être rendu compte que l’image du canvas était de mauvaise qualité j’essaye de créer dynamiquement une image d’un premier canvas en très grand et l’insérer redimensionner dans un second canvas pour tenter d’améliorer le rendu final du pdf qui est généré.

Voila pour mon test.

Malheureusement, je ne comprend pas pourquoi mon pdf est vide …

Voila mon code : 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
    <head>
        <style>
            body{
                margin:0;
            }

            #myCanvas{
                width:500px;
                height:500px;
                border:1px solid red;
            }

            .page{
                border:1px solid black;
                width:400px;
                height:400px;
            }

            .interface{
                background-color:#ddd;
                padding:20px;
            }

            .bloc{
                border:1px dotted red;
            }

        </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
    </head>
    <body>


    <canvas id="myCanvas"></canvas>

    <canvas id="canvas2"></canvas>


    <div class="interface">
        <button onclick="addText()">Ajouter texte</button>
        <button onclick="save()">Enregistrer</button>
        <button onclick="generatePdf()">PDF</button>
    </div>

    <script>
var canvas = new fabric.Canvas('myCanvas', { width: 500, height: 500 });
var bloc;//liste des blocs

function addText(){
    // create a rectangle object
    bloc = new fabric.Textbox('Nouveau texte', { left: 100, top: 100 });
    canvas.add(bloc);
}

function save(){
    //enregistrement en base 64 de l'image
    var imgData = new Image();
    imgData = canvas.toDataURL({
    format: 'png',
    multiplier: 1
    });

    // on enregistre l'image sur le serveur
    $.post("save.php", {image: imgData}, function(result){
        console.log(result);
    });

    //console.log(imgData);
    console.log('image enregistrée');
    return imgData;
}

// génère une image en base 64 et créé le pdf avec cette image du canvas
function generatePdf(){

    // image généré du canvas de personnalisation => image en grande taille
    var imgData = save();
    //console.log(imgData);

    var canvasResize = document.getElementById('canvas2');
    var ctx = canvasResize.getContext("2d");
    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    canvasResize.width = 500;
    canvasResize.height = 500;

    //on dessine l'image HD sur le nouveau canvas
    var image = new Image();
    image.onload = function() {
        ctx.drawImage(image, 0, 0, 500, 500);
    };
    image.src = imgData;

    var imageResize = new Image();
    imageResize = canvasResize.toDataURL();

    console.log('Image resize :');
    console.log(imageResize);


  var pdf = new jsPDF('p', 'mm', [132,132]);

  pdf.addImage(imageResize, 'PNG', 0, 0);
  pdf.save("download.pdf");
  //fabric.log('JSON without default values: ', canvas.toJSON());
    }
    </script>
    </body>
</html>

J’ai bien mais 2 canvas avec le contenu : (en rouge le premier en bleu le deuxième).Image utilisateur

Par contre l’image générée pour le canvas 2 (imageResize = canvasResize.toDataURL();) est vide :

Je ne comprends absolument pas pourquoi alors que ça fonctionne pour la 1ère.

Et il y a t’il une meilleure façon de produire un pdf HD ?

Merci d’avance pour votre aide. Florian

+0 -0

Je ne comprends pas trop ta question ?

Mais oui tout est du même nom de domaine si c’est ça dont tu parles.

arglow

Le navigateur possède une protection qui bloque le traitement d’image provenant d’une site/domaine différent.

Dans ton cas, c’est que tu dois attendre le chargement de l’image. image.onload S’exécute après la fin de ta fonction. Et non selon l’ordre des lignes.

La suite de ton code doit être dans :

1
2
3
image.onload = function() {
    ctx.drawImage(image, 0, 0, 500, 500);
};

Car tu dois attendre que l’image soit charger avant de vouloir la voir. ;)

Pour t’aider à comprendre : https://jsfiddle.net/5c1uq2ke/

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte