在畫廊中顯示 firebase 圖像放大

Question

所以我從我的 firebase 數據庫中制作了一個畫廊。 這些圖像來自我的 canvas 元素，您的鼠標在該元素中畫了一條線。 但是，我的 canvas 很大（因為它是一個水平滾動），大約 16000 像素寬，所以當圖像顯示時，圖像中的筆畫很小，幾乎不明顯。 我怎樣才能將它們顯示得更大，或者說只顯示圖像的一部分但放大？

這就是我顯示圖像的方式

let elements = document.getElementById("gallery");

    db.collection("users")
    .get()
    .then(querySnapshot =>{
        //querySnapshot is all the data from the collection
        querySnapshot.forEach(doc=>{
            let name=doc.id;
            //construct the div to present data in html
            let singlePerson= document.createElement("div");
            singlePerson.className="person";
            let info= document.createElement("p");
            info.innerText="Name:"+name;
            singlePerson.append(info);

            // retrieve data from storage by passing the path name of the image
            storageRef
            .child("images/"+name) //name
            .getDownloadURL()
            .then(function(url){
                let img = document.createElement("img");
                img.src =url;

                // singlePerson.append(img);
                gallery.append(img);
                 img.style.width="100%" ;
                 img.style.height="100%" ;
           
            });

        });
    });

Answer 1

更新：我使用 img.style.clipPath 讓它工作！