javascript 使用javascript分割图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21933043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Split an image using javascript
提问by jforjs
How to get a sections of a single image using javascript and store it in an array, and later display randomly on html5 canvas.
如何使用javascript获取单个图像的一部分并将其存储在数组中，然后在html5画布上随机显示。
回答by
You can use the clipping parameters of the drawImage() method and draw your clipped image onto a dynamically created canvas.
您可以使用 drawImage() 方法的裁剪参数并将裁剪后的图像绘制到动态创建的画布上。
An example could be:
一个例子可能是：
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;
}
This will return a canvas element with the clipped image drawn in already. You can now use the canvas directly to draw it onto another canvas.
这将返回一个已经绘制了剪切图像的画布元素。您现在可以直接使用画布将其绘制到另一个画布上。
Example of usage; in your main code you can do:
用法示例；在您的主代码中，您可以执行以下操作：
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());
回答by Michael Adekunle Salami
....Or you can just use the CSS sprite technique which is faster and easier.
....或者你可以使用更快更简单的 CSS sprite 技术。
If you have an image(my_Image.gif for example) and you intend to extract only a portion using this method, you can simulate the extract as a background of a DIV element . See the code below.
如果您有一个图像（例如 my_Image.gif）并且您打算使用此方法仅提取一部分，则可以将提取的内容模拟为 DIV 元素的背景。请参阅下面的代码。
portion1id parameters below simply say "From my image, slice 100px high and 100px wide from position 0px to the left(margin-left) and 0px to the top(margin-top)"
下面的第 1部分id 参数只是说“从我的图像中，从位置 0px 到左侧（左边距）和 0px 到顶部（边距顶部）切片高 100 像素，宽 100 像素”
portion2id parameters below simply say "From my image, slice 100px high and 100px wide from position -91px to the left(margin-left) and 0px to the top(margin-top)"
部分2以下ID参数简单地说，“从我的形象，片100px的高度和位置-91px向左100像素宽（利润率左）和0像素的顶部（边距）”
With this, you can slice any size from any position by simply manipulating the pixels. You can also use % as well.
有了这个，您可以通过简单地操作像素从任何位置切片任何大小。您也可以使用 % 。
Note: Your image must be in gif format in this case and must be residing in the root of your server...
注意：在这种情况下，您的图像必须是 gif 格式，并且必须位于服务器的根目录中...
You can use other image extensions...jpeg, png etc.
您可以使用其他图像扩展名...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>
