圖像位於頁面的div與id而不是src - 在HTML5/JavaScript中圍繞圓柱形對象的圖像

我有一個圖像環繞圓柱體，感謝以前的帖子。圖像位於頁面的div與id而不是src - 在HTML5/JavaScript中圍繞圓柱形對象的圖像

嘗試在圓柱體周圍環繞base64圖像時遇到困難。

圖像位於div中，id爲#nbdesigner_frontend_area img，它已經在頁面上，而不是外部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/

來源

2017-10-17 user2059376

在你的小提琴，圖像具有父元素用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;

來源

2017-10-17 05:39:53

這在小提琴完美工作，謝謝。唯一的問題是，在實際環境中，源頁面在頁面加載後會很好地顯示在div中，因此當它運行時，它不起作用。 'img.onload = function（）{'我需要一個if語句來檢查源圖像是否存在，並且一旦源圖像出現而不是在頁面加載時它將運行。有什麼建議麼？ – user2059376

認爲這會工作，但不是骰子'wrapImage.onload = function（）{'沒有拋出任何錯誤，但它沒有在小提琴上工作 – user2059376

@ user2059376你能描述一下用例嗎？由用戶？我猜你有一個與三個杯子顯示的界面，以及一個用戶可以上傳文件的區域，然後你希望它包圍現有的馬克杯圖像。是對的嗎？ –

圖像位於頁面的div與id而不是src - 在HTML5/JavaScript中圍繞圓柱形對象的圖像

回答

相關問題