Javascript 使用画布粉碎图像

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

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];
}

var image=newimage（）；
image.src='koals.jpg'；
image.onload=cutImageUp；
var imagePieces=[]；
函数cutImageUp（）{
对于（变量x=0；x<5；x++）{
对于（变量y=0；y<5；y++）{
var canvas=document.createElement（'canvas'）；
canvas.width=50+“px”；
canvas.height=50+“px”；
var context=canvas.getContext（'2d'）；
drawImage（图像，x*50，y*50，50，50，0，0，50，50）；
push（canvas.toDataURL（））；
}
}
var anImageElement=document.getElementById（'img'）；
anImageElement.src=imagePieces[0]；
}

问题是图像返回“空白图像”（即未加载）； 控制台没有抛出任何错误。

---

我正在以本地html文件的形式打开它，图像和html文档都在同一个文件夹中，因此由于图像位于另一个域中，toDataURL（）不返回数据应该不会有问题。

您的问题在于

50+“px”

对于画布的宽度和高度，请删除

+“px”

部分和您的物品

发件人：

canvas元素有两个属性来控制坐标空间的大小：宽度和高度。指定这些属性时，其值必须为

var image=newimage（）；
image.src='koals.jpg'；
image.onload=cutImageUp；
var imagePieces=[]；
函数cutImageUp（）{
对于（变量x=0；x<5；x++）{
对于（变量y=0；y<5；y++）{
var canvas=document.createElement（'canvas'）；
宽度=50；
高度=50；
var context=canvas.getContext（'2d'）；
drawImage（图像，x*50，y*50，50，50，0，0，50，50）；
push（canvas.toDataURL（））；
}
}
var anImageElement=document.getElementById（'img'）；
anImageElement.src=imagePieces[0]；
}

---

有时浏览器出于安全目的专门处理本地文件，即使它们只与其他本地文件交互。如果您设置web服务器以便可以从正常URL提供脚本，您可能会发现不同的结果。您的问题在于画布宽度和高度的

50+'px'

，请删除

+'px'

部分和不带“px”的物品它抛出toDataURL error=Uncaught SecurityError:未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布。ggggg.html:25 CutimageUp当您遇到问题时，当您从其他域访问图像时，它将显示您的画布。这里的解决方案是将图像存储在同一个域上，将图像转换为base64（我在fiddle中所做的），或者从服务器设置凭据以接受CORS（）