javascript - Image located on page in div with id instead of src - 在 HTML5/JavaScript 中将图像包裹在圆柱形对象周围

Question

多亏了之前的帖子，我得到了一个环绕圆柱体的图像。

尝试将 base64 图像环绕圆柱体时遇到问题。

图像位于页面上已有的 ID 为 #nbdesigner_frontend_area img 的 div 中，而不是外部 src 图像文件。

尝试将 img.src 更改为页面上已在 div id 中的 base64 图像。

有什么建议吗？我知道我很接近。 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/

Answer 1

在您的 fiddle 中，图像有一个父元素，其 id 为 nbdesigner_frontend_area - 此解决方案基于该假设。

您可以简单地引用元素的 .src，所以不要像这样:

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

...这样做:

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