IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Sauvegarder l'image d'un <canvas>


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut Sauvegarder l'image d'un <canvas>
    Bonjour,
    j'ai tenté d'adapter un code pour mon site "pierres-info.fr" (site non commercial autofinancé).
    Il s'agit d'afficher sur une image un texte modifiable à volonté (taille, position, font...) pour présenter l'aspect d'une gravure sur pierre...

    Ça fonctionne avec Firefox et Edge, mais, premier problème, l'image n’apparaît pas avec IE.
    Et surtout, dans tous les cas, mon bouton "Sauvegarder" ne fonctionne pas, il ne se passe rien et je ne peux pas enregistrer l'image du résultat...
    Je ne comprends pas pourquoi et je me prends le chou depuis des jours...

    Voici le code :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <!DOCTYPE html>
    <html lang="en" >
     
    <head>
    <meta charset="UTF-8">
     
    <titre>Générateur de texte</titre>
     
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="main.css" rel="stylesheet">
    </head>
     
      <style>
     
     
        .row {
          width: 100%;
          padding: 5px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
        }
            
        .column {
          padding: 0px 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
            
        .input-container {
          padding-bottom: 3px;
        }
            
        .titre {
          font-size: 20px;
        }
            
        #text {
          width: 200px;
          height: 100px;
        }
            
        #download-link {
          display: none;
        }
        #save-button {
          font-size: 20px;
          cursor: pointer;
          color: black;
          background-color: white;
        }
            
        #save-button:hover {
          color: white;
          background-color: black;
        }
            
        #canvas {
          max-width: 100%;
          height: auto;
        }
            
            column
        @media(max-width: 400px)
            {.column 
            {text-align: center;
         width: 100%;
         padding-bottom: 10px;
          }}
              
    </style>
     
    <body>
     
    <div class="row">
    <div class="titre">
    Générateur de Texte
    </div>
    </div>
     
    <div class="row">
    <div class="column">
    <div>
    Texte à insérer
    </div>
     
    <div>	  
    <textarea id="text">
    Votre texte 
    ou chiffres 
     
    ICI
    </textarea>
    </div>
    </div>
     
    <div class="column">
    <div>
    Taille du texte
    </div>
     
    <div class="input-container">
    <input id="font-size" placeholder="eg: 50" value="50">
    </div>
     
          <div>
            Espace entre les lignes
          </div>
          <div class="input-container">
            <input id="gap-size" placeholder="eg: 0" value="0">
          </div>
          <div>
            Distance depuis le haut
          </div>
          <div class="input-container">
            <input id="buffer-size" placeholder="e.g.: 200" value="140"/>
          </div>
        </div>
        <div class="column">
          <div>
            Style d'écriture
          </div>
          <div class="input-container">
            <select id="font-style">
    		  <option value="Times New Roman">Times New Roman</option>
              <option value="Times">Times</option>
              <option value="Arial">Arial</option>
              <option value="Helvetica">Helvetica</option>
              <option value="Courier New">Courier New</option>
              <option value="Courier">Courier</option>
              <option value="Verdana">Verdana</option>
              <option value="Georgia">Georgia</option>
              <option value="Palatino">Palatino</option>
              <option value="Garamond">Garamond</option>
              <option value="Bookman">Bookman</option>
              <option value="Comic Sans MS">Comic Sans MS</option>
              <option value="Trebuchet MS">Trebuchet MS</option>
              <option value="Arial Black">Arial Black</option>
              <option value="Impact">Impact</option>
            </select>
          </div>
          <div>
            Contour
            <input id="font-is-outline" type="checkbox"/>
          </div>
          <div>
            Gras
            <input id="font-is-bold" type="checkbox"/>
          </div>
        </div>
        <div class="column">
          <div>
            <button id="save-button">Sauvegarder</button>
          </div>
        </div>
      </div>
      <div class="row">
        <canvas id="canvas"></canvas>
      </div>
      <a id="download-link" download="plaque.png"></a>
     
      <script>
     
        const elmTextArea = document.getElementById("text");
        const elmCanvas = document.getElementById("canvas");
        const ctx = elmCanvas.getContext("2d");
        const img = new Image();
     
        function paint() {
          elmCanvas.width = img.width;
          elmCanvas.height = img.height;
          ctx.drawImage(img, 0, 0);
     
          const center = elmCanvas.width / 2;
          const color = '#000000';
          const fontSize = parseInt(document.getElementById("font-size").value);
          const bufferSize = parseInt(document.getElementById("buffer-size").value);
          const gapSize = parseInt(document.getElementById("gap-size").value);
          const fontStyle = document.getElementById("font-style").value;
          const fontIsOutline = document.getElementById("font-is-outline").checked;
          const fontWeight = document.getElementById("font-is-bold").checked ? 'bold' : 'normal';
     
          ctx.textAlign = "center";
          ctx.font = `${fontWeight} ${fontSize}px ${fontStyle}`;
          ctx.lineWidth = 1;
          ctx.fillStyle = color;
          ctx.strokeStyle = color;
     
          elmTextArea.value.split('\n').forEach((line, i) => {
            const yOffset = bufferSize + (i * (gapSize + fontSize));
            if (fontIsOutline){
              ctx.strokeText(line, center, yOffset);
            } else {
              ctx.fillText(line, center, yOffset);
            }
          });
        }
     
        img.onload = paint;
        img.src = 'plaque.jpg';
     
        document.addEventListener('input', e => {
          if (e.target.matches('input,textarea')) {
            e.stopPropagation();
            paint();
          }
        });
        document.addEventListener('change', e => {
          if (e.target.matches('select,input[type=checkbox]')) {
            e.stopPropagation();
            paint();
          }
        });
     
        document.getElementById('save-button').addEventListener('click', () => {
          var dt = elmCanvas.toDataURL("image/png");
          const elmDownload = document.getElementById("download-link");
          elmDownload.href = dt;
          elmDownload.click();
        });
     
      </script>
    </body>
    </html>

    Et les images jpg et png :
    Nom : plaque.jpg
Affichages : 223
Taille : 10,9 Ko
    Nom : plaque.png
Affichages : 209
Taille : 173,5 Ko

    Voilà voilà...
    Merci à la bonne âme qui voudra bien me donner un petit coup de main ou me dire d'aller réviser.
    Patapierre

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Votre code fonctionne. Cependant, l'image dans votre Javascript n'est pas accessible.

    Je vous conseillerais de mettre un chemin absolu vers ces images, c'est plus facile.
    Il faut également que l'image soit hébergée au même endroit, ou alors que le server qui l'héberge autorise les requêtes externes (CORS Policy)

    Voici un exemple que j'ai réalisé avec votre code en changeant juste l'URL dans la partie JS : https://tests.pierre-roels.com/gener...e-texte-en-js/
    (On ne change pas dans l'HTML car cette partie sert à donner un nom au fichier qui sera téléchargé)


    Code que j'ai changé :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    img.src = "https://tests.pierre-roels.com/wp-content/themes/sage-8.5.1/dist/images/plaque_a9a11ef1.jpg";


    EDIT : Pensez à l'attribut type dans vos inputs ! Ca sera beaucoup plus ergonomique ;-)
    Dans mon exemple, j'ai mis un type="number" pour la taille du texte, espace entre les lignes et distance depuis le haut
    De plus, pour bien faire utiliser la balise <label> avec chaque input est mieux; et même un must-have pour les checkbox & radio

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    Un grand merci pour votre réponse.
    J'essaie chez moi mais j'éprouve des difficultés pour retrouver le lien vers mon image...
    Faut-il l'enregistrer chez un hébergeur d'image pour obtenir une URL ou bien puis-je l'insérer depuis mes images sous D ?

    Merci pour votre patience...

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Il s'agit d'une image au même titre que toutes les autres; elle n'a rien de particulier.
    Si je prends l'exemple de votre banner, elle se trouve dans http://www.pierres-info.fr/_frame/banusr.gif

    Ici c'est la même chose, vous devez uploader votre image quelque part sur votre site et en connaitre l'URL afin de l'indiquer à votre script.

    Pour afficher des contenus sur Internet, il faut forcément qu'ils soient sur Internet.
    Tout ce qui est sur votre disque dur, seul vous pouvez le voir

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    Merci pour ce complément d'information...

    Je suis entrain d'éditer mon image "plaque.png" dans un dossier "generateur_de_texte" sur mon site et donc, si je reprends mon code à la ligne download, je devrais avoir cela :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
     <a id="download-link" download="https://pierres-info.fr/generateur_de_texte_plaque.png"></a>

    Rien d'autre n'est à modifier ?

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    J'ai revu mon code avec l'adresse d'une nouvelle image publiée : "https://pierres-info.fr/plaque/"
    J'en ai profité pour mettre les balises <label> c'est effectivement beaucoup mieux.
    Maintenant il faut que j'édite mon site pour voir si tout cela fonctionne...

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    <!DOCTYPE html>
    <html lang="en" >
     
    <head>
    <meta charset="UTF-8">
     
    <title>Générateur de texte</title>
     
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="main.css" rel="stylesheet">
    </head>
     
      <style>
      
       html, body {
          width: 100%;
          margin: 0 auto;
        }
        textarea, input, button, select {
          border: 1px solid #FF4500;
        }
     
        .row {
          width: 100%;
          padding: 5px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
        }
            
        .column {
          padding: 0px 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
            
        .input-container {
          padding: 8px;
        }
            
        .titre {
          font-size: 20px;                                                      
        }
            
        #text {
          width: 200px;
          height: 100px;
        }
            
        #download-link {
          display: none;
        }
        #save-button {
          font-size: 18px;
          cursor: pointer;
              margin: 20px;
          color: white;
          background-color: brown;
        }
            
        #save-button:hover {
          color: brown;
          background-color: orange;
        }
            
        #canvas {
          max-width: 100%;
          height: auto;
        }
            
            column
        @media(max-width: 400px)
            {.column 
            {text-align: center;
         width: 100%;
         padding-bottom: 10px;
          }}
              
    </style>
     
    <body>
     
    <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="text">
                            <center>Texte à insérer</center>
                        </label>
                        <div>	  
                            <textarea class="form-control" row="5" style="height: 130px;" id="text">
    Votre texte 
    ou chiffres 
     
    ICI</textarea>
                        </div>
                    </div>
                </div>
     
                <div class="col">
                    <div class="form-group">
                        <label for="font-size">
                          <center>Taille du texte</center>
                        </label>
     
                        <div class="input-container">
                            <input class="form-control" type="number" id="font-size" placeholder="eg: 50" value="80">
                        </div>
                    </div>
     
     
                    <div class="form-group">
                        <label for="gap-size">
                            <center>Espace entre les lignes</center>
                        </label>
                        <div class="input-container">
                            <input class="form-control" type="number" id="gap-size" placeholder="eg: 0" value="0">
                        </div>
                    </div>
     
     
                    <div class="form-group">
                        <label for="buffer-size">
                            <center>Distance depuis le haut</center>
                        </label>
                        <div class="input-container">
                            <input class="form-control" type="number" id="buffer-size" placeholder="e.g.: 200" value="140"/>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="font-style">
                            <center>Style d'écriture</center>
                        </label>
                        <div class="input-container">
                            <select id="font-style" class="form-control">
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Times">Times</option>
                                <option value="Arial">Arial</option>
                                <option value="Helvetica">Helvetica</option>
                                <option value="Courier New">Courier New</option>
                                <option value="Courier">Courier</option>
                                <option value="Verdana">Verdana</option>
                                <option value="Georgia">Georgia</option>
                                <option value="Palatino">Palatino</option>
                                <option value="Garamond">Garamond</option>
                                <option value="Bookman">Bookman</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Trebuchet MS">Trebuchet MS</option>
                                <option value="Arial Black">Arial Black</option>
                                <option value="Impact">Impact</option>
                            </select>
                        </div>
                    </div>
     
                    <div class="form-group">
                        <div>
                            <label>
                                <center>Contour
                                <input class="checkbox" id="font-is-outline" type="checkbox"/></center>
                            </label>
                        </div>
                    </div>
     
                    <div class="form-group">
                        <div>
                            <label>
                                <center>Gras
                                <input class="checkbox" id="font-is-bold" type="checkbox"/></center>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group mt-25">
                        <button id="save-button" class="btn btn-primary btn-lg"><center>Sauvegarder</center></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <canvas id="canvas"></canvas>
            </div>
     
      <a id="download-link" download="https://pierres-info.fr/plaque/"></a>
     
      <script>
     
        const elmTextArea = document.getElementById("text");
        const elmCanvas = document.getElementById("canvas");
        const ctx = elmCanvas.getContext("2d");
        const img = new Image();
     
        function paint() {
          elmCanvas.width = img.width;
          elmCanvas.height = img.height;
          ctx.drawImage(img, 0, 0);
     
          const center = elmCanvas.width / 2;
          const color = '#000000';
          const fontSize = parseInt(document.getElementById("font-size").value);
          const bufferSize = parseInt(document.getElementById("buffer-size").value);
          const gapSize = parseInt(document.getElementById("gap-size").value);
          const fontStyle = document.getElementById("font-style").value;
          const fontIsOutline = document.getElementById("font-is-outline").checked;
          const fontWeight = document.getElementById("font-is-bold").checked ? 'bold' : 'normal';
     
          ctx.textAlign = "center";
          ctx.font = `${fontWeight} ${fontSize}px ${fontStyle}`;
          ctx.lineWidth = 1;
          ctx.fillStyle = color;
          ctx.strokeStyle = color;
     
          elmTextArea.value.split('\n').forEach((line, i) => {
            const yOffset = bufferSize + (i * (gapSize + fontSize));
            if (fontIsOutline){
              ctx.strokeText(line, center, yOffset);
            } else {
              ctx.fillText(line, center, yOffset);
            }
          });
        }
     
        img.onload = paint;
        img.src = 'plaque.png';
     
        document.addEventListener('input', e => {
          if (e.target.matches('input,textarea')) {
            e.stopPropagation();
            paint();
          }
        });
        document.addEventListener('change', e => {
          if (e.target.matches('select,input[type=checkbox]')) {
            e.stopPropagation();
            paint();
          }
        });
     
        document.getElementById('save-button').addEventListener('click', () => {
          var dt = elmCanvas.toDataURL("image/png");
          const elmDownload = document.getElementById("download-link");
          elmDownload.href = dt;
          elmDownload.click();
        });
     
      </script>
      <style>@media (max-width: 420px) {html {margin-top: 0!important;}#wpadminbar{display:none;}}</style>
    </body>
    </html>

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    Et ça ne fonctionne pas...
    Je ne comprends pas où est la paille (ou la poutre...) ?

  8. #8
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Vous n'avez rien changé au problème.

    Je pensais avoir été clair dans mon premier message : c'est dans le javascript qu'il faut mettre l'URL complète et non dans l'HTML (car dans l'HTML ça sert à donner un nom au fichier qui sera téléchargé).

    Comme je l'ai mis dans mon premier message c'est le img.src = qui doit contenir le lien complet vers l'image, c'est à dire la ligne 226 de votre dernier copier/coller.

    NB : Je vois que vous avez introduit des balises <center>, elles sont obsolètes depuis HTML5.

  9. #9
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    Merci pour les remarques
    J'avais déjà essayé mais comme je rame, je fini par faire n'importe quoi...

    J'ai hébergé mon image chez goopics pour voir et entré cette ligne de code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     img.onload = paint;
        img.src = 'https://i.goopics.net/0m7Ay.png';
    Et ligne 186 j'ai replacé mon image "plaque.png"


    Mais je n'obtiens toujours rien lorsque je clique sur le bouton de téléchargement...

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    tout d'abord toutes mes excuses je n'ai lu qu'en diagonale la discussion mais ...
    J'ai hébergé mon image chez goopics pour voir et entré cette ligne de code :
    L'image doit être hébergée sur ton domaine si tu veux pouvoir l'utiliser simplement.

    PS : peut être que <canvas> Download & print image pourrait t'aider !

  11. #11
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    @NoSmoking a raison, je l'avais d'ailleurs précisé dans mon premier message également :
    Il faut également que l'image soit hébergée au même endroit, ou alors que le server qui l'héberge autorise les requêtes externes (CORS Policy)

  12. #12
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    J'ai tenté une page sur mon site et ça ne donne toujours rien
    j'ai apparemment un bug sur le canvas "canvas étiquette de texte non conforme WCAG"

    Ma page : https://www.pierres-info.fr/generate...xte/index.html

  13. #13
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2020
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Avril 2020
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    Bon désolé, ça fonctionne désormais... Je peux enfin enregistrer l'image
    Un grand merci pour votre aide et vos support.
    Je vais désormais arranger la présentation pour mon site (le lien ci-dessus sera donc obsolète)

    Encore merci
    Affaire résolue non sans mal

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Sauvegarde d'image canvas avec Ajax et PHP
    Par coincoin22 dans le forum jQuery
    Réponses: 8
    Dernier message: 09/03/2013, 23h56
  2. [API WIN] SAuvegarder l'image du pointeur
    Par eyghon dans le forum Windows
    Réponses: 10
    Dernier message: 19/04/2006, 14h10
  3. [Tkinter] Insérer une image jpg sur un canvas avec PIL
    Par Kyojimbo dans le forum Tkinter
    Réponses: 2
    Dernier message: 23/02/2006, 17h46
  4. Sauvegarder une image (.GIF/.JPG) avec CppWebBrowser
    Par Argol_Medusa dans le forum C++Builder
    Réponses: 12
    Dernier message: 12/12/2005, 12h27
  5. [VisualC++] Copie et sauvegarde d'images
    Par dananchet dans le forum MFC
    Réponses: 2
    Dernier message: 03/05/2005, 14h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo