Obtention de l'urldata d'une image d'arrière-plan avec Javascript (éventuellement en utilisant canvas)

Question

Supposons qu'il existe un élément DIV et qu'il possède une propriété CSS background-image.

Je veux obtenir urldata (base64) de l'image de fond avec Javascript.

Je peux obtenir des urldata d'éléments IMG mais qu'en est-il de celui-ci?

Merci.

Answer 1

Vous pouvez obtenir la valeur de la propriété background-image avec window.getComputedStyle, puis créer un canevas et une image, appliquer la valeur au src de l'image, dessiner sur le canevas et enfin obtenir les données? = °

function getBgImageData(el,callback) { 
    var url, 
     image, 
     canvas = document.createElement('canvas'), 
     ctx = canvas.getContext('2d'); 

    // Allows el to be an element or an id 
    if(typeof el==='string') { 
    el = document.getElementById(el); 
    } 

    // Gets the value of the background-image property 
    url = window.getComputedStyle(el,null).backgroundImage; 
    // Removes the url("") part 
    url = url.substring(5,url.length-2); 

    // Creates the image 
    image = new Image(); 
    image.src = url; 
    image.onload = function() { 
    canvas.width = image.width; 
    canvas.height = image.height; 
    // Draws the image 
    ctx.drawImage(image,0,0); 

    if(callback) { 
     // Passes the data to the callback function 
     callback(canvas.toDataURL()); 
    } 
    }; 
} 

getBgImageData('someId',function(data) { 
    alert(data); 
}); 

(getComputedStyle ne fonctionne pas dans IE ... mais ni ne Canvas)