Javascript 在透明图像或div中放大背景图像

一旦你看到图片，这个问题就很容易理解了。我希望在不使用图像编辑软件的情况下复制此图像，我知道可能会模糊背景图像，并且想知道是否可以对缩放进行同样的操作。我也愿意使用canvas/JavaScript

---

下面是一个使用

剪辑路径的想法：


.box{
高度：300px；
宽度：600px；
背景：var（--i）中心/100%自动无重复；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：var（--i）中心/200%自动无重复；
剪辑路径：多边形（50%20%、70%50%、50%80%、30%50%）；
}
您可以使用相同的背景图像创建一个div元素并放大它

因此，从图像开始：

img = document.getElementById(imgID);

您可以创建一个“玻璃”div并将其放在图像上：

glass = document.createElement("DIV");
img.parentElement.insertBefore(glass, img);

然后使用与背景相同的图像：

glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";

并根据需要进行缩放：

glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";

为了创建所需的形状，您可以使用此网站

这里有一个完整的例子：


功能放大（imgID，缩放）{
var img，玻璃，w，h，bw；
img=document.getElementById（imgID）；
/*创建放大镜：*/
glass=document.createElement（“DIV”）；
设置属性（“类”、“img放大镜”）；
/*插入放大镜：*/
img.parentElement.insertBefore（玻璃，img）；
/*设置放大镜的背景属性：*/
glass.style.backgroundImage=“url（'“+img.src+”）”；
glass.style.backgroundRepeat=“无重复”；
glass.style.backgroundSize=（img.width*zoom）+“px”+（img.height*zoom）+“px”；
体重=3；
w=玻璃偏移网络宽度/2；
h=玻璃。离光/2；
}
放大（“myimage”，3）
*{框大小：边框框；}
.img放大镜容器{
位置：相对位置；
}
.img放大镜{
位置：绝对位置；
宽度：50px；
高度：100px；
顶部：50px；
左：125px；
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；
}

是的，可以使用大量其他元素，如SVG、css片段路径等。太宽了。看起来，这是另一个单独的背景，不是缩放。谢谢这将帮助我开始。哦，我喜欢
var（）
CSS函数，我不知道。美好的