如何在JavaScript中不使用画布分割图像

如何在不使用画布的情况下剪切图像？假设我使用

new image（）

以常规方式创建图像，但是如何在不使用

canvas.getImageData

的情况下获取图像的一部分，因为我希望在chrome中脱机时可以使用它。我制作了一个小游戏，我有一个精灵表，我必须切碎它，我希望这个游戏在本地运行，但是chrome会出现跨平台错误。是否有其他方法可以获取图像的一部分？
如果这是一个糟糕的问题，请不要代表我，只要这样说，我会删除它

---

另外，我说的是游戏精灵而不是css精灵

脱机运行时是否存在违反CORS安全的情况

否则，html画布也可以脱机工作：-）

只要您有权访问spritesheet，就可以在本地对其进行剪切

如果单个精灵为矩形，则可以使用drawImage的扩展版本，而不是更复杂的getImageData

canvas.width=characterWidth    // resize the canvas to the character width 
canvas.height=characterHeight  // resize the canvas to the character height

context.drawImage(
    spritesheet,                      // the spritesheet image
    characterX,characterY,            // the top-left x/y of the character on the spritesheet
    characterWidth,characterHeight,   // the width/height of the character on the spritesheet
    0,0,canvas.width,canvas.height)   // draw the character on the canvas

然后，您可以使用canvas.toDataURL“剪切”该字符，并使用dataurl创建html图像对象

[添加：使用交叉源标志以满足CORS要求]

为了满足CORS限制，您可以在html img元素上或在创建javascript图像对象时使用crossOrigin=“anonymous”标志

重要提示：您的服务器还必须配置为以符合CORS的方式提供映像：

以下是使用to crossOrigin标志下载不会污染html画布的图像的示例：

---

不，这是一个使用画布的html5游戏，但是我想要一个方法来切割精灵表，而不使用画布来允许它在chrome上离线/本地工作。另外，我所说的精灵是指游戏精灵而不是css精灵。你可以使用这个方法来剪辑图像。：（我希望有其他方法，因为这不是很有效。我有很多问题，但这个方法用于数据不必担心！Canvas可以“完成所有这些工作”在应用程序开始时。Canvas有足够的马力来处理快速切割甚至是巨大的spritesheet——这是它的强大套件！至于CORS，你如何交付你的应用程序？我问，因为CORS问题可以通过使用crossOrigin=“anonymous”交付你的spritesheet来克服标记，然后将spritesheet保存到交付html、css、js的同一文件夹中。你说crossOrigin=“anonymous”标记有什么魔力？我将如何使用它？因为如果我可以摆脱CORS问题，我很乐意去做，因为我有一个优化的方法来分割图像，但它使用toDataURL（）或者，您可以简单地将所有角色作为单独的预剪切图像交付。crossOrigin=“anonymous”告诉浏览器尝试将此图像标记为非跨域图像，即使它实际上是从另一个域下载的。这样画布就不会被“污染”您可以使用toDataURL。重要提示：还必须配置提供spritesheet的网站。Dropbox.com是一个公共文件托管网站，允许从其公用文件夹下载符合CORS的内容。我将很快用一个示例更新我的答案。

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/flags.jpg";
    function start(){
        canvas.width=100;
        canvas.height=100;
        ctx.drawImage(img,125,10,100,100,0,0,canvas.width,canvas.height);
        var img1=new Image();
        img1.onload=function(){
            document.body.appendChild(img1);
        }
        img1.src=canvas.toDataURL();
    }