將元素添加到DOM，更改樣式並應用JS庫

我有一個頁面，其中包含任何數量的圖像pinch-zoom-element我想用畫布替換所有圖像並將其應用於PinchZoomCanvas library。畫布被添加到代碼中，即使庫被應用，但畫布的寬度和高度都保持在0px。將元素添加到DOM，更改樣式並應用JS庫

var pictures = document.getElementsByClassName('pinch-zoom-element'); 
for(var i = 0; i < pictures.length; i++){ 
    var imageItem = pictures.item(i); 
    var canv = document.createElement('canvas'); 
    var foto = imageItem.src; 
    canv.id = 'canvasIdItem'; 
    canv.style.width = "300px"; 
    canv.style.height = "300px"; 
    imageItem.parentNode.insertBefore(canv, imageItem.nextSibling); 
    imageItem.parentNode.removeChild(imageItem); 
    console.log(canv); 
    var pinchZoom = new PinchZoomCanvas({ 
     canvas: canv, 
     path: foto, 
     zoomMax: 2, 
     doubletap: true, 
     onZoomEnd: function (zoom, zoomed) { 
      console.log("---> is zoomed: %s", zoomed); 
      console.log("---> zoom end at %s", zoom); 
     }, 
     onZoom: function (zoom) { 
      console.log("---> zoom is %s", zoom); 
     } 
    }); 
}

我該如何得到這個工作？提前致謝！

來源

2017-09-14 LordVermiis

嘗試'canv.style.width = 「300」';等等。 – bhansa

同樣的結果'' – LordVermiis

設置你的畫布高度和寬度，如：

canv.style.width = "300"; 
canv.style.height = "300";

您還可以使用特定的選擇設置它在你的CSS：

canvas { 
    width: 500px; 
    height: 400px; 
}

來源

2017-09-14 16:36:46 bhansa

得到了相同的結果：'' – LordVermiis

也刪除內部樣式。 – bhansa

這是在鉻上檢查DOM後粘貼的結果。我沒有內在的風格。問題是insertBefore，如果我更改'imageItem.parentNode.insertBefore（canv，imageItem.nextSibling）;'爲'document.body.insertBefore（canv，imageItem.nextSibling）;'，它的工作原理，但它的位置新的畫布只是DOM上的最後一個。我的目標是將圖像替換爲畫布。 – LordVermiis

將元素添加到DOM，更改樣式並應用JS庫

回答

相關問題