javascriptでinput type="file"を作って送信

やりたかったこととしては、ユーザーが指定した画像をjavascriptで加工(トリミングやリサイズ)したファイルをinput type="file"に指定してアップロードしたかった。
結論から言うとFormDataにBlob型のオブジェクトをセットして送信すればいいみたい。

var file2blob = function(file) {
  return new Promise(function(resolve, reject) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(theFile) {
      var img = new Image();
      img.src = theFile.target.result;
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        var base64 = canvas.toDataURL('image/jpeg');
        var blob = base64toBlob(base64);
        deffered.resolve(blob);
      };
    };
  });
  return deffered.promise;
};

var base64toBlob = function(base64) {
  var tmp = base64.split(',');
  var data = atob(tmp[1]);
  var mime = tmp[0].split(':')[1].split(';')[0];
  var buf = new Uint8Array(data.length);
  for (var i = 0; i < data.length; i++) {
    buf[i] = data.charCodeAt(i);
  }
  var blob = new Blob([buf], { type: mime });
  return blob;
}

var file = document.getElementById('file');
file.addEventListener('change', function(event) {
   var image = event.target.files[0]
   convertImg(image)
   .then(function(image) {
     var formData = new FormData();
     formData.append('image', image, 'image.jpg');
     var request = new XMLHttpRequest();
     request.open('POST', 'http://example.com/');
     request.send(formData);
   });

以上です