使用 javascript 分割图像答案

【问题标题】：Split an image using javascript使用 javascript 分割图像
【发布时间】：2014-02-21 11:22:39
【问题描述】：

如何使用javascript获取单个图像的一部分并将其存储在一个数组中，然后在html5画布上随机显示。

【问题讨论】：

【解决方案1】：

您可以使用 drawImage() 方法的裁剪参数，将裁剪后的图像绘制到动态创建的画布上。

一个例子可以是：

function getClippedRegion(image, x, y, width, height) {

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    //                   source region         dest. region
    ctx.drawImage(image, x, y, width, height,  0, 0, width, height);

    return canvas;
}

这将返回一个画布元素，其中已经绘制了剪裁的图像。您现在可以直接使用画布将其绘制到另一个画布上。

使用示例；在你的主代码中你可以这样做：

var canvas = document.getElementById('myScreenCanvas'),
    ctx    = canvas.getContext('2d'),
    image  = document.getElementById('myImageId'),
    clip   = getClippedRegion(image, 50, 20, 100, 100);

// draw the clipped image onto the on-screen canvas
ctx.drawImage(clip, canvas.width * Math.random(), canvas.height * Math.random());

【讨论】：

【解决方案2】：

....或者你可以使用更快更容易的 CSS sprite 技术。

如果您有一个图像（例如 my_Image.gif）并且您打算使用此方法仅提取一部分，您可以将提取模拟为 DIV 元素的背景。请参阅下面的代码。

portion1 下面的 id 参数简单地说“从我的图像中，从位置 0px 到左侧（margin-left）和 0px 到顶部（margin-top）切片 100px 高和 100px 宽”

portion2 下面的 id 参数简单地说“从我的图像中，从位置 -91px 到左侧（margin-left）和 0px 到顶部（margin-top）切片 100px 高和 100px 宽”

有了这个，您可以通过简单地操作像素从任何位置切割任何尺寸。您也可以使用 %。

注意：在这种情况下，您的图像必须是 gif 格式，并且必须位于服务器的根目录中...

您可以使用其他图像扩展名...jpeg、png 等。

 <!DOCTYPE html>
      <html>
        <head>
          <style>

            #portion1 {
                width: 100px;
                height: 100px;
                background: url(my_Image.gif) 0 0;
            }

            #portion2 {
                width: 100px;
                height: 100px;
                background: url(my_Image.gif) -91px 0;
            }
            </style>
            </head>
            <body>


             <div id="portion1"></div><br>
             <div id="portion2"></div>


              <script>
               //creating the array to hold the portions
               var ImagePortions = [
               "url('my_Image.gif') 0 0 ",
               "url('my_Image.gif') -91px 0"];

/*You can now create your canvas container that will act as the parent  of these array elements and use Math.random() to display the portions*/


       </script>


        </body>
        </html>

【讨论】：

好主意，简单又甜美。谢谢