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 :

Récupèrer la chaine base64 d'une image de canvas


Sujet :

JavaScript

  1. #1
    Membre du Club
    Récupèrer la chaine base64 d'une image de canvas
    Hello

    Ce sujet est en relation avec mon précédent mais comme on est plus dans l'input type file, j'ai préféré ouvrir un nouveau sujet plus adapté.

    Alors après pas mal de recherches, je suis parvenu à 2 scripts qui un peu mélangés pourrais répondre à la fonction souhaitée.

    Rappel de la fonction souhaitée :
    Plusieurs images de Discogs (base de données de disques) sur un formulaire, en cliquer une permet de la stocker sur mon serveur lorsque je valide le formulaire.

    Évidement, toutes les diverses solutions testés jusqu'à présents (que ce soit en JS ou en PHP coté serveur), me confrontaient au problème de Cross domain origin.

    Le premier script que j'ai trouvé permet de coller dans un canvas une image précédemment copiée et de révéler la chaîne base64 de l’image collée :
    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
    <!DOCTYPE html>
    <html lang="fr">
    <title>Copier coller</title>
    <meta charset="UTF-8">
    <head>
    </head>
    <body>
    <input type="text" id="dataimage" value="" size='200'><br>
    <img src="https://img.discogs.com/BikKF85_JhE_mKohXKdVAIxISz8=/fit-in/395x400/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-1430032-1395448595-3906.jpeg.jpg" id='imgsource' ><b>
    <p>Clic droit, Copiez the image ci-dessus et faites CTRL V</p>
    <canvas style="border:0px solid grey;" id="mycanvas"></canvas>
    </body>
    </html>
    <script type="text/javascript" language="javascript" >
    /**
     * This handler retrieves the images from the clipboard as a blob and returns it in a callback.
     * 
     * @see http://ourcodeworld.com/articles/read/491/how-to-retrieve-images-from-the-clipboard-with-javascript-in-the-browser
     * @param pasteEvent 
     * @param callback 
     */
    function retrieveImageFromClipboardAsBlob(pasteEvent, callback){
            if(pasteEvent.clipboardData == false){
            if(typeof(callback) == "function"){
                callback(undefined);
            }
        };
     
        var items = pasteEvent.clipboardData.items;
     
        if(items == undefined){
            if(typeof(callback) == "function"){
                callback(undefined);
            }
        };
     
        for (var i = 0; i < items.length; i++) {
            // Skip content if not image
            if (items[i].type.indexOf("image") == -1) continue;
            // Retrieve image on clipboard as blob
            var blob = items[i].getAsFile();
     
            if(typeof(callback) == "function"){
                callback(blob);
            }
        }
    }
     
    window.addEventListener("paste", function(e){
        // Handle the event
        retrieveImageFromClipboardAsBlob(e, function(imageBlob){
            // If there's an image, display it in the canvas
            if(imageBlob){
                var canvas = document.getElementById("mycanvas");
                var ctx = canvas.getContext('2d');
                
                // Create an image to render the blob on the canvas
                var img = new Image();
     
                // Once the image loads, render the img on the canvas
                img.onload = function(){
                    // Update dimensions of the canvas with the dimensions of the image
                    canvas.width = this.width;
                    canvas.height = this.height;
     
                    // Draw the image
                    ctx.drawImage(img, 0, 0);
                };
     
                // Crossbrowser support for URL
                var URLObj = window.URL || window.webkitURL;
     
                // Creates a DOMString containing a URL representing the object given in the parameter
                // namely the original Blob
                img.src = URLObj.createObjectURL(imageBlob);
                            
                            var reader = new FileReader();
                            reader.readAsDataURL(imageBlob); 
                            reader.onloadend = function() {
                            var base64data = reader.result;                
                            document.getElementById("dataimage").value = base64data;
                            }
            }
        });
    }, false);
    </script>
    (Et j'avoue n'en comprendre que 10% et encore lol)

    Le deuxième permet de copier l'image Discogs dans un canvas :
    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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Cliquer</title>
    </head>
    <body>
    <input type="text" id="dataimage" value="" size='200'><br>
    <img src="https://img.discogs.com/BikKF85_JhE_mKohXKdVAIxISz8=/fit-in/395x400/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-1430032-1395448595-3906.jpeg.jpg" id='imgsource' onclick="copy();"><canvas id="mycanvas"></canvas>
    <script>
     
    // https://codepo8.github.io/canvas-images-and-pixels/copy.html
     
      var sourceimage = document.getElementById('imgsource');
      canvas = document.getElementById('mycanvas');
      canvas.height = canvas.width = 0;
      var context = canvas.getContext('2d');
      
      function copy() {
        var imgwidth = sourceimage.offsetWidth;
        var imgheight = sourceimage.offsetHeight;
        canvas.width = imgwidth;
        canvas.height = imgheight;
        context.drawImage(sourceimage, 0, 0);
      }
      
    </script>
    </body>
    </html>


    L'idée étant de cacher le canvas et le champs input text où va la chaîne base64 pour en utiliser sa valeur lors de l'envoi des données au serveur (qui lui, convertira en image jpg, peu importe les diverses pertes, c'est juste pour une pochette de disque affichée en 120x120 )

    Mon problème sur lequel je cale complet, c'est d'utiliser la partie permettant d'avoir le base64 du canvas, du premier script, pour adapter au deuxième script et avoir le base64 du canvas qui reçoit l’image copiée grâce au clic sur l'originale.

    Je patauge complètement (c'est con pour un canard lol), j'ai bien tenté un peu de lecture pour comprendre ce qu'était blob et son fonctionnement, ça m'a cassé encore plus le crane qu'autre chose

    Si quelqu'un a une tite idée pour ce pauvre canard

    Merkouin
    Couin
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  2. #2
    Membre éprouvé
    jour

    pas sur que ca marchera car même canvas a un mécanisme qui risque d’empêcher la création d'une image ne respectant pas le cross origine
    Plus vite encore plus vite toujours plus vite.

  3. #3
    Membre du Club
    Pouik !

    Pourtant le deuxième script permet de créer l'image venue de discogs, dans le canvas ?
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

###raw>template_hook.ano_emploi###