Question

我试图用画布将图像碎成碎片，这是我的代码：

var image = new Image();
image.src = 'koals.jpg';
image.onload = cutImageUp;

 var imagePieces = [];
function cutImageUp() {

    for(var x = 0; x < 5; x++) {
        for(var y = 0; y < 5; y++) {
            var canvas = document.createElement('canvas');
            canvas.width = 50+"px";
            canvas.height = 50+"px";
            var context = canvas.getContext('2d');
            context.drawImage(image, x *50, y * 50, 50, 50, 0, 0, 50, 50);

           imagePieces.push(canvas.toDataURL());
        }
    }


    var anImageElement = document.getElementById('img');
    anImageElement.src = imagePieces[0];
}

问题是图像正在返回＆＃34;空白图像＆＃34; （a.k.a未加载）; 控制台无法抛出任何错误。我打开它作为本地html文件，图像和html文档都在同一个文件夹中，因此toDataURL（）不会因图像在另一个域上而返回数据时出现问题。

Answer 1

问题在于50+"px"的画布宽度和高度，请删除+"px"部分以及您的好处。

来自w3Specs：

canvas元素有两个属性来控制坐标空间的大小：width和height。指定时，这些属性的值必须为valid non-negative integers。

var image = new Image();
image.src = 'koals.jpg';
image.onload = cutImageUp;

 var imagePieces = [];
function cutImageUp() {

    for(var x = 0; x < 5; x++) {
        for(var y = 0; y < 5; y++) {
            var canvas = document.createElement('canvas');
            canvas.width = 50;
            canvas.height = 50;
            var context = canvas.getContext('2d');
            context.drawImage(image, x *50, y * 50, 50, 50, 0, 0, 50, 50);

           imagePieces.push(canvas.toDataURL());
        }
    }


    var anImageElement = document.getElementById('img');
    anImageElement.src = imagePieces[0];
}

jsfiddle

使用画布破碎图像

1 个答案: