Question

如何在不使用画布的情况下剪切图像？假设我使用new Image()以常规方式创建图像但是如何在不使用canvas.getImageData的情况下获取部分图像，因为我希望在Chrome中脱机时使用它。我做了一个小游戏，我有一个spritesheet，我必须削减，我希望这个游戏在本地工作，但铬获得跨平台错误。有没有其他方法可以获得图像的一部分？
如果这是一个不好的问题，请不要 - 请回复我，我会删除它

另外，我在谈论游戏精灵而不是css sprites

Answer 1

离线运行时是否存在CORS安全违规行为？

否则，html canvas也可以离线工作:-)

只要您有权访问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图像对象。

[另外：使用crossOrigin标志来满足CORS要求]

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

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

http://enable-cors.org/

以下是使用crossOrigin标志下载不会污染html画布的图像的示例：http://jsfiddle.net/m1erickson/K9C42/

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

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

1 个答案: