一、目标1：上传图片并展示（搞定）

参看一篇博客：《上传一张图片并在页面中展示》
参看阮一峰老师的开源书籍的其中章节：《FileReader 对象》

  1. <input type="file" id="img"/><br /><br /><br />
  2. <canvas id="canvas"></canvas>
  1. var image;
  2. img.onchange = function () {
  3.     let file = document.querySelector('input[type=file]').files[0]  // 获取选择的文件，这里是图片类型
  4.     let reader = new FileReader()
  5.     reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
  6.     reader.onload = function(e) { // 文件读取完成时触发
  7.         let result = e.target.result // base64格式图片地址
  8.         image = new Image();
  9.         image.src = result // 设置image的地址为base64的地址 
  10.         image.onload = function(){
  11.             var canvas = document.querySelector("#canvas"); 
  12.             var context = canvas.getContext("2d"); 
  13.             canvas.width = image.width; // 设置canvas的画布宽度为图片宽度 
  14.             canvas.height = image.height; 
  15.             context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片 
  16.             //let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量 
  17.             // dataUrl 为压缩后的图片资源，可将其上传到服务器 
  18.         } 
  19.     }
  20. }
  1. /* HTML 代码如下
  2.   <input type="file" onchange="previewFile()">
  3.   <img src="" height="200">
  4. */
  6. function previewFile() {
  7.   var preview = document.querySelector('img');
  8.   var file    = document.querySelector('input[type=file]').files[0];
  9.   var reader  = new FileReader();
  11.   reader.addEventListener('load', function () {
  12.     preview.src = reader.result;
  13.   }, false);
  15.   if (file) {
  16.     reader.readAsDataURL(file);
  17.   }
  18. }

二、目标2：将图片拖入指定的位置（搞定）

拿到拖动的信息可以参看这篇博客：《HTML5 - 通过拖拽读取图片文件》
参看 MDN 对于拖动元素处理的相关文档：《HTML 拖放 API》、《拖拽操作》

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Read Image</title>
  6.   <style>
  7.     #dropBox {
  8.       margin: 15px;
  9.       width: 250px;
  10.       height: 250px;
  11.       border: 5px dashed gray;
  12.       border-radius: 8px;
  13.       background: lightyellow;
  14.       background-size: 100%;
  15.       background-repeat: no-repeat;
  16.       text-align: center;
  17.     }
  19.     #dropBox div {
  20.       margin: 75px 45px;
  21.       color: orange;
  22.       font-size: 25px;
  23.       font-family: Verdana, Arial, sans-serif;
  24.     }
  26.     input {
  27.       margin: 15px;
  28.     }
  29.   </style>
  31.   <script>
  32.     var dropBox;
  34.     window.onload = function() {
  35.       dropBox = document.getElementById("dropBox");
  36.       dropBox.ondragenter = ignoreDrag;
  37.       dropBox.ondragover = ignoreDrag;
  38.       dropBox.ondrop = drop;
  39.     }
  41.     function ignoreDrag(e) {
  42.       //因为我们在处理拖放，所以应该确保没有其他元素会取得这个事件
  43.       e.stopPropagation();
  44.       e.preventDefault();
  45.     }
  47.     function drop(e) {
  48.       //取消事件传播及默认行为
  49.       e.stopPropagation();
  50.       e.preventDefault();
  52.       //取得拖进来的文件
  53.       var data = e.dataTransfer;
  54.       var files = data.files;
  55.       //将其传给真正的处理文件的函数
  56.       processFiles(files);
  57.     }
  59.     function processFiles(files) {
  60.       var file = files[0];
  61.       var output = document.getElementById("fileOutput");
  62.       //创建FileReader
  63.       var reader = new FileReader();
  64.       //告诉它在准备好数据之后做什么
  65.       reader.onload = function (e) {
  66.         //使用图像URL来绘制dropBox的背景
  67.         dropBox.style.backgroundImage = "url('" + e.target.result + "')";
  68.       };
  69.       //读取图片
  70.       reader.readAsDataURL(file);
  71.     }
  73.     function showFileInput() {
  74.       var fileInput = document.getElementById("fileInput");
  75.       fileInput.click();
  76.     }
  77.   </script>
  78. </head>
  80. <body>
  81.     <div id="dropBox">
  82.       <div>将图片拖放到此处...</div>
  83.     </div>
  84.     <input id="fileInput" type="file" onchange="processFiles(this.files)">
  85.     <img id="thumbnail">
  86. </body>
  87. </html>

三、目标3：预览图片并下载（搞定）

参看一篇博客：《js 将canvas生成图片下载或直接保存一张图片》

  • 下载 canvas（搞定）
  • 放置图片到 canvas 上（搞定）
  • 根据参数原样地把图片放置到 canvas 上（搞定）

四、目标4：可调节画板的格子（搞定）

  • 调节线（搞定）
  • 图片随着调节线的移动而变化（搞定）

五、后续优化

目前做的非常简陋，需要做以下优化

  • 重新整理数据，调整数据结构，把数据放在相对合理的位置
  • 重写调节线的逻辑，现在的实现方法很 low
  • 每个盒子里图片可以调节大小和位置，默认态是撑满盒子
  • 优化编写每个组件，加强其功能

「@浪里淘沙的小法师」