图像位于 div 中的页面上，带有 id 而不是 src - 在 HTML5 / JavaScript 中将图像包裹在圆柱形对象周围

Question

感谢之前的帖子，我有一张可以环绕圆柱体的图像。

尝试将 base64 图像包裹在圆柱体周围时遇到问题。

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

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

有什么建议吗？我知道我很接近了。小提琴上的完整代码...

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

在您的小提琴中，图像有一个 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;