位于div页面上的图像，id不是src-在HTML5/JavaScript中围绕圆柱形对象包装图像

多亏了之前的一篇文章，我得到了一个环绕圆柱体的图像

尝试将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);
  }
};
}

};

函数loadUpperIMage（）{
var img=新图像（）；
img.src=”http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg"
img.onload=函数（）{
var iw=img.宽度；
var ih=img.高度；
var xOffset=102，//左填充
yOffset=110；//顶部填充
//警报（ih）
var a=75.0；//图像宽度
var b=10；//圆度
var scaleFactor=iw/（4*a）；
//绘制垂直切片
对于（变量X=0；X

---

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

---

这把小提琴演奏得很好，谢谢。唯一的问题是，在实际环境中，源图像在页面加载之后以id显示在div中，所以当它运行onload时就不起作用了

img.onload=function（）{

Thinking我需要一个if语句来检查源映像是否存在，并且在源映像出现而不在页面加载时它将运行。有什么建议吗？我认为这会起作用，但不是dice

wrapImage.onload=function（）{

没有抛出任何错误，但在fiddle@user2059376你能描述一下这个用例吗，即用户采取了什么行动？我猜你有一个显示三个杯子的界面，以及一个用户可以上传文件的区域，然后你希望它环绕现有的杯子图像。对吗？谢谢你的帮助返回给我。有一个div被单击作为打开lightbox的按钮。该div没有唯一的id或类，但它有

data action=“preview lightbox”data defaulttext=“preview”

作为可能的目标。这可以用作调用脚本的按钮，因为此时会生成杯子的base64图像。知道如何将目标设置为do action=preview lightbox以运行脚本吗？如果您可以保证它是唯一具有该属性和值的div，则可以使用

document.querySelector（'div[data action=“preview lightbox”]；

，否则您可以使用

document.querySelectorAll（'div[data action=“preview lightbox”]）；

并在其中迭代，直到找到正确的一个。