带图像上传的Javascript拼图

上面的链接是我在codepen上找到的一个拼图游戏。我希望将拼图图像作为用户上传的图像。所以拼图是他们选择的图像。我想用Javascript实现这一点，我知道PHP可能更容易，但我想要一个Javascript/jquery应用程序。我相信下面的代码可以解决这个问题，但我不知道如何将其作为img src实现，并将这两个代码结合在一起。如有任何帮助，将不胜感激

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>

函数previewFile（）{
var preview=document.querySelector（'img'）；//选择名为img的查询
var file=document.querySelector（'input[type=file]'）。files[0]；//与此处相同
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；//将数据作为URL读取
}否则{
preview.src=“”；
}
}
预览文件（）//调用名为previewFile（）的函数

用户图像可能不适合确切的大小，因此应进行缩放裁剪。我看不到你代码中的那部分。。。或者这个插件已经处理好了吗？缩放裁剪将成为一个问题，但我可以稍后解决，不过这个阶段只是让它工作，因为我对成功地将这两个代码组合在一起有点困惑，这就是我目前所困惑的。