Image située sur la page dans div avec id au lieu de src - Enveloppe une image autour d'un objet cylindrique en HTML5/JavaScript

Question

J'ai une image à enrouler autour d'un cylindre, grâce à un post précédent.

Avoir de la difficulté à essayer d'enrouler une image en base64 autour du cylindre.

L'image est située dans un div avec un identifiant de #nbdesigner_frontend_area img qui est déjà sur la page au lieu d'un fichier d'image src externe.

Essayer de modifier img.src en une image base64 déjà sur la page dans un ID div.

Des suggestions? Je sais que je suis proche. code complet au violon ...

function loadUpperIMage() { 
var img = new Image(); 


img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg" 
img.onload = function() { 

    var iw = img.width; 
    var ih = img.height; 

    var xOffset = 102, //left padding 
    yOffset = 110; //top padding 

    //alert(ih) 
    var a = 75.0; //image width 
    var b = 10; //round ness 

    var scaleFactor = iw/(4 * a); 

    // draw vertical slices 
    for (var X = 0; X < iw; X += 1) { 
    var y = b/a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation 
    ctx.drawImage(img, X * scaleFactor, 0, iw/9, ih, X + xOffset, y + yOffset, 1, 174); 
    } 
}; 
} 

}; 

https://jsfiddle.net/n1r7dxnf/

Answer 1

Dans votre violon, l'image a un élément parent avec l'identifiant nbdesigner_frontend_area - cette solution est basée sur cette hypothèse.

Vous pouvez simplement faire référence au .src de l'élément, donc au lieu de quelque chose comme ceci:

img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg" 

... font ceci:

var wrapImage = document.getElementById("nbdesigner_frontend_area").getElementsByTagName("img")[0]; 
img.src = wrapImage.src;