我想用原始图像创建拼图图像,这意味着将图像切割成9个(3x3)然后随机洗牌并存储为新图像。有谁知道哪种方法是最好的,以及如何实现它?或许与CamanJS?有没有人有示例代码?
答案 0 :(得分:12)
Canvas可以使用context.drawImage
的剪辑版本来完成此操作。
context.drawImage
允许您剪切原始图像中的9个子片段,然后将它们绘制在画布上的任何位置。
drawImage的剪辑版本采用以下参数:
要裁剪的图片:img
剪辑开始的原始图像中的 [clipLeft,clipTop]
要从原始图像剪裁的子图像的 [clipWidth,clipHeight] 尺寸
Canvas上的 [drawLeft,drawTop] ,剪切的子图像将开始绘制
[drawWidth,drawHeight] 是要在画布上绘制的子图像的缩放尺寸
如果drawWidth==clipWidth
和drawHeight==clipHeight
,子图像将以与原始图像相同的尺寸绘制。
如果drawWidth!==clipWidth
和drawHeight!==clipHeight
,子图像将被缩放然后绘制。
这里的示例代码和Demo随机将剪裁的片段绘制到画布上。它会对一个数组进行混洗以定义各个部分的随机位置,然后使用drawImage
来绘制这些部分。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var rows=3;
var cols=3;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sailboat.png";
function start(){
var iw=canvas.width=img.width;
var ih=canvas.height=img.height;
var pieceWidth=iw/cols;
var pieceHeight=ih/rows;
var pieces = [
{col:0,row:0},
{col:1,row:0},
{col:2,row:0},
{col:0,row:1},
{col:1,row:1},
{col:2,row:1},
{col:0,row:2},
{col:1,row:2},
{col:2,row:2},
]
shuffle(pieces);
var i=0;
for(var y=0;y<rows;y++){
for(var x=0;x<cols;x++){
var p=pieces[i++];
ctx.drawImage(
// from the original image
img,
// take the next x,y piece
x*pieceWidth, y*pieceHeight, pieceWidth, pieceHeight,
// draw it on canvas based on the shuffled pieces[] array
p.col*pieceWidth, p.row*pieceHeight, pieceWidth, pieceHeight
);
}}
}
function shuffle(a){
for(var j, x, i = a.length; i; j = Math.floor(Math.random() * i), x = a[--i], a[i] = a[j], a[j] = x);
return a;
};
&#13;
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
&#13;
<canvas id="canvas" width=300 height=300></canvas>
&#13;