Question

cutImageUp是一个js脚本，已在SE中讨论过，Shattering image using canvas。但是我对使用它有一个不同的问题。我尝试的HTML没有做任何事情。我确信我做了一个简单的错误，但是我看到它太多了。

cutImageUp脚本：

<script type="text/javascript">

var image = new Image();
image.src = "letere.png"; 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];
}
</script>

我的HTML：

<html>
    <head>
        <script src="cutImageUp.js"></script>
    </head>
<body>
<img src="letere.png" onload="cutImageUp()" width="50" height="50">
</img>
</body>
</html>

运行页面时，图像出现，未应用此功能。我不妨运行没有js的页面。顺便说一句，文件在同一个文件夹中，我尝试使用Base64，没有运气。

Answer 1

删除＆lt; script＆gt; cutImageUp.js中JavaScript代码周围的标签。当您在JS文件中嵌入JS代码时，您只需要那些。

用于运行JS图像转换函数的HTML

1 个答案: