Question

我有一个包含任意数量图像的页面pinch-zoom-element我想用画布替换所有图像并将它们应用于PinchZoomCanvas library。 Canvas已添加到代码中，即使应用了库，但画布仍保持0px宽度和高度。

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);
        }
    });
}

我怎样才能使这个工作？提前谢谢！

Answer 1

将画布的高度和宽度设置为：

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

您也可以使用特定的选择器在您的CSS中设置它：

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

添加元素到DOM，更改样式并应用JS库

1 个答案: