キャンバスの絵のカットを使用します

画像を選択するために、入力ラベルを使用して、キャンバスの行と列の数が絵をカットし、あなたがカットを設定することができます使用します

これは、htmlコードです

...
 < 入力タイプ= "ファイル" ID = "入力" > 
...

 これは、JSコードであります

クラスSplitImage {
    コンストラクタ（オプション）{
      この .OPTIONSの= {
        COL： 3 、
        行： 3 、
        inputEle： ''
      }
      この .OPTIONS = Object.assign（{}、この.OPTIONS、オプション）
       の場合（！この.options.inputEle）{
         スロー 新しい（ 'Options.inputEleが無効である！チェックしてください！'エラーを）
      }
      この .input = NULL 
      この .canvas = NULL 
      この .ctx = NULL 
      この .IMG = NULL 
      この.INIT（）
    }
    その中に （） {
      この .input = document.querySelectorAll（この .options.inputEle）[0 ]
       この .input.onchange = この .fileChange.bind（本）
       この.createCanvas（）
    }
    非同期fileChange（）{
      ファイルを聞かせて = これは [0 .input.files ]
       してみてください{
        base64でみましょう =が待っています。この.fileReader（ファイル）を
         してみてください{
          待つこの.createImg（BASE64）
           この.splitImg（）
        } キャッチ（E）{
          console.log（E）
        }
      } キャッチ（E）{
        console.log（E）
      }
    }
    FileReaderの（ファイル）{ // ファイルがBase64で読ん
      返す 新しい新しい約束（（解決、拒否）=を> {
        CONSTリーダー   = 新しいFileReaderの（）
        reader.readAsDataURL（ファイル）
        reader.onload =（E）=> {
          constの結果 = e.target.result
          解決（結果）
        }
        reader.onerror =（E）=> {
          （e）を拒否
        }
      }）
    }
    createImg（Base64で）{ // ロード画像が
      戻り 、新しい新しいプロミス（（解決、拒否）=>を{
        constのIMG = 新しい画像（）
        img.onload =（E）=> {
           この .IMG = IMG
          ）（解決
        }
        img.onerror =（E）=> {
          console.log（E）
          （e）を拒否
        }
        img.src = BASE64
      }）
    }
    createCanvas（）{ // 创建キャンバス
      この .canvas =のdocument.createElement（ 'キャンバス' ）
       この .ctx = この .canvas.getContext（ '2D' ）
    }
    drawImg（オプション = {}）{ // 绘制图片
      この .canvas.width = options.width
       この .canvas.height = options.height
       この .ctx.drawImage（この .IMG、options.x、options.y、オプション。幅、options.height、0、0 、options.width、options.height）
      constのBASE64 = この.canvas.toDataURL（）
      聞かせてIMG =のdocument.createElement（ 'IMG' ）
      img.src = BASE64
      img.style.border = '5pxの固体赤い' 
      img.style.marginBottom = '-5px'
      document.body.appendChild（IMG）
    }
    splitImg（）{ // 切割图片 
      リスト=せて[]
       のために（Y = 0せ; Y < 本 .options.row; Yは++ ）{
         ため（; X <X = 0せ、この .options.colあり; x ++ ）{
          聞かせてsimpleWidth =のparseInt（この .img.width / この.options.col）
          聞かせてsimpleHeight =のparseInt（この .img.height / この.options.row）
          list.push（{
            X：X * simpleWidth、
            Y：Y * simpleHeight、
            幅：simpleWidth、
            高さ：simpleHeight
          }）
        }
      }
      list.forEach（項目 => {
         この.drawImg（アイテム）
      }）
    }
  }
  splitImageましょう = 新しい{（SplitImageを
    COL： 2、// 画像列切断 
    行：2、// 画像の切断行数 
    inputEle '#INPUT' // タグセレクタを 
  }）

これはオリジナルです

これは、画像がより明瞭に見るために、9つの3×3のグリッドに分割され、画像切断した後で、Iは黒枠5pxのの画像に追加しました