Question

我的小提琴有问题。我试图从我的电脑上传一个图像，然后它被切片，所有的方块都被洗牌。我设法创建了上传图像的功能，而其他人则设法从网络切片和随机播放图像，但我不能让它们一起工作。你能帮我吗？代码如下：

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
}


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var rows=6;
var cols=6;

var img=new Image();
img.onload=start;
img = document.getElementById("myImg");
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:3,row:0},
    {col:4,row:0},
    {col:5,row:0},
    {col:0,row:1},
    {col:1,row:1},
    {col:2,row:1},
    {col:3,row:1},
    {col:4,row:1},
    {col:5,row:1},
    {col:0,row:2},
    {col:1,row:2},
    {col:2,row:2},
    {col:3,row:2},
    {col:4,row:2},
    {col:5,row:2},
    {col:0,row:3},
    {col:1,row:3},
    {col:2,row:3},
    {col:3,row:3},
    {col:4,row:3},
    {col:5,row:3},
    {col:0,row:4},
    {col:1,row:4},
    {col:2,row:4},
    {col:3,row:4},
    {col:4,row:4},
    {col:5,row:4},
    {col:0,row:5},
    {col:1,row:5},
    {col:2,row:5},
    {col:3,row:5},
    {col:4,row:5},
    {col:5,row:5},
  ]
    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;
}

body{ background-color: ivory; padding:10px; }
#canvas{border:0px solid ;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type='file' />
<img id="myImg" src="#" alt="your image" />
<canvas id="canvas" width=1080 height=1080></canvas>

Answer 1

在代码中，您在覆盖onload变量后立即设置img处理程序。在这段代码中，由于第3行，前2行基本上是死代码。

var img=new Image();
img.onload=start;
img = document.getElementById("myImg");

你应该只是抓住元素并在之后添加你的处理程序。

var img = document.getElementById("myImg");
img.onload=start;

上传图片，将其随机播放并显示

1 个答案: