CODEWITHSUNDEEP
javascripthtml
user2059376
user2059376

Reputation: 431

Image located on page in div with id instead of src - Wrap an image around a cylindrical object in HTML5 / JavaScript

I've got an image to wrap around a cylinder, thanks to a previous post.

Having trouble trying to wrap a base64 image around the cylinder.

The image is located within a div with an id of #nbdesigner_frontend_area img that is already on the page instead of an external src image file.

Trying to change img.src to a base64 image already on the page in a div id.

Any suggestions? I know I'm close. Full code on fiddle...

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/

Upvotes: 1

Views: 64

Answers (1)

e_i_pi
e_i_pi

Reputation: 4820

In your fiddle, the image has a parent element with the id nbdesigner_frontend_area - this solution is based on that assumption.

You can simply reference the .src of the element, so instead of something like this:

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

...do this:

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

Upvotes: 1

Related Questions