通过 Javascript 将图像切割成碎片答案

【问题标题】：Cutting an Image into pieces through Javascript通过 Javascript 将图像切割成碎片
【发布时间】：2012-02-13 08:04:45
【问题描述】：

我正在创建一个简单的拼图游戏。为了做到这一点，我需要将我正在使用的图片切成 20 块。 Javascript中有没有办法将图片切成20等份并将它们保存为网页中的20个不同对象？还是我只需要进入 Photoshop 并自己剪切每张图片并调用它？

【问题讨论】：

一个画布元素可以让你“剪出”碎片，但具体如何做取决于你对碎片做什么的确切要求。
我希望这些片段可以拖放。我目前正在使用 Jquery 来完成此任务，但由于不支持此功能，并且第三方附加组件无法正常工作，因此我回避使用 Jquery。如果它可以拖放，我可能会切换到 HTML5。无论如何，我基本上想要 20 张不同的图像，我可以将它们拖放到一个框架上，这样它们就可以“解决”这个难题。

标签： javascript html

【解决方案1】：

您可以使用 drawImage 方法对源图像的部分进行切片并将它们绘制到画布上：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

类似：

  document.getElementById("vangogh").onclick=function()
    {
    draw();
    }; 

 function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.drawImage(document.getElementById('source'),33,45);
                 }

然后为您的新实体创建可拖动的内容：

<div id="columns">
   <div class="column" draggable="true"><header>A</header></div>
   <div class="column" draggable="true"><header>B</header></div>
   <div class="column" draggable="true"><header>C</header></div>
</div>

http://www.html5rocks.com/en/tutorials/dnd/basics/

【讨论】：

【解决方案2】：

使用 Canvas 很容易做到这一点。总体思路是：

var image = new Image();
image.onload = cutImageUp;
image.src = 'myimage.png';

function cutImageUp() {
    var imagePieces = [];
    for(var x = 0; x < numColsToCut; ++x) {
        for(var y = 0; y < numRowsToCut; ++y) {
            var canvas = document.createElement('canvas');
            canvas.width = widthOfOnePiece;
            canvas.height = heightOfOnePiece;
            var context = canvas.getContext('2d');
            context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
            imagePieces.push(canvas.toDataURL());
        }
    }

    // imagePieces now contains data urls of all the pieces of the image

    // load one piece onto the page
    var anImageElement = document.getElementById('myImageElementInTheDom');
    anImageElement.src = imagePieces[0];
}

【讨论】：

这可能会出现 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': 受污染的画布可能无法导出。
@MertKoksal 因为 CORS 你可以设置：img.setAttribute('crossOrigin', 'anonymous');参考：stackoverflow.com/a/20424457/7121889

【解决方案3】：

您可以通过将图像设置为 div 的背景，然后设置其背景位置来做到这一点。这与使用CSS Sprites基本相同。

（假设片段为 100 x 100 像素）

<div class="puzzle piece1"></div>
<div class="puzzle piece2"></div>

CSS：

.puzzle {
   background-image:url(/images/puzzle.jpg);
   width:100px;
   height:100px;
}

.piece1 {
   background-position:0 0
}

.piece2 {
   background-position:-100px -100px
}

【讨论】：