仅使用Javascript或Jquery从图像中提取多个图像而不使用CSS [重复]答案

【问题标题】：Extract multiple images from image using Javascript or Jquery only without using CSS [duplicate]仅使用Javascript或Jquery从图像中提取多个图像而不使用CSS [重复]
【发布时间】：2020-12-01 14:10:29
【问题描述】：

PS : 对于这个项目的要求使用 Javascript 或 Jquery，我不能使用 CSS。

我需要使用 javascript 和 html 从图像中提取图像并显示在 div 中。

我尝试使用这张图片：

有关信息，此图像仅用于测试和解决方案的基础，我将适应现实世界的图像项目。

我想在我的 HTML 中使用 img dom 获取这 2 张图片并显示在我的 div 中。

为此，我尝试调整这项工作http://jsfiddle.net/yn1tworg/6/ 为我工作。但没有成功。

任何人知道如何解决这个问题，或jsfiddle.net 工作请与我分享，谢谢。

【问题讨论】：

这不应该用 javascript 来完成。您应该能够使用 css 来划分 sprite map 的特定象限以供您使用。编辑：随机谷歌，citsf221.community.uaf.edu/07-navigation-image-maps-css-sprites

标签： javascript html canvas

【解决方案1】：

使用 CSS 并与 background-position 一起玩，直到图像是你需要的。

#box{
    width: 120px;
    height: 120px;
    background-color: #ff0000;
    background-image: url(https://i.stack.imgur.com/3YWPU.png);
    background-position: 280px -260px;
}

&lt;div id='box'&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以使用clip CSS peoperty --

    <div style="padding: 300px;">
        <img src="./overflow_files/3YWPU.png" style="position: absolute;clip: rect(260px,730px,380px,600px);">
        
            
        </div>

【讨论】：