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

**Couin** · 17/10/2020, 08h14

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