どのようにキャンバスの画像の背景を拡張し、javascriptのFileオブジェクトに変換するには？

Question

このimageのようなpng/jpeg画像ファイル（画像a）をブラウザから任意のサイズでアップロードし、別のサイズ（画像b）の新しい画像にエクスポートする必要があります。ご覧のとおり、イメージの比率を保持し、欠落している部分を普通の色（たとえば白）で塗りつぶしたいと思います。どうすればjavascriptを使ってこれを行うのですか？

EDIT：ご迷惑をおかけして申し訳ありません。私はすでにこの問題を解決するために私自身のコードを追加して自分の質問を編集しました。私の作品はキャンバスを使用して白い背景を描画し、キャンバスに合っている限りアップロードされた画像を描画しています。次にReimg.jsを使ってキャンバスをキャプチャしてダウンロードします。

ただし、キャプチャした画像を使用したい場合は、もう一度アップロードする必要があります。以下のコードは私が望むものではありません。再びその画像をキャプチャし、アップロードすることなく、

ので、（Fileオブジェクト）ファイルデータを取得し、その後、以下の私のコードのようにそれを処理し、画像ファイルをアップロードする任意のより良い方法はあり？

// reimg.js 
 
window.ReImg = { 
 

 
    OutputProcessor: function(encodedData, svgElement) { 
 

 
     var isPng = function() { 
 
      return encodedData.indexOf('data:image/png') === 0; 
 
     }; 
 

 
     var downloadImage = function(data, filename) { 
 
      var a = document.createElement('a'); 
 
      a.href = data; 
 
      a.download = filename; 
 
      document.body.appendChild(a); 
 
      a.click(); 
 
     }; 
 

 
     return { 
 
      toBase64: function() { 
 
       return encodedData; 
 
      }, 
 
      toImg: function() { 
 
       var imgElement = document.createElement('img'); 
 
       imgElement.src = encodedData; 
 
       return imgElement; 
 
      }, 
 
      toCanvas: function(callback) { 
 
       var canvas = document.createElement('canvas'); 
 
       var boundedRect = svgElement.getBoundingClientRect(); 
 
       canvas.width = boundedRect.width; 
 
       canvas.height = boundedRect.height; 
 
       var canvasCtx = canvas.getContext('2d'); 
 

 
       var img = this.toImg(); 
 
       img.onload = function() { 
 
        canvasCtx.drawImage(img, 0, 0); 
 
        callback(canvas); 
 
       }; 
 
      }, 
 
      toPng: function() { 
 
       if (isPng()) { 
 
        var img = document.createElement('img'); 
 
        img.src = encodedData; 
 
        return img; 
 
       } 
 

 
       this.toCanvas(function(canvas) { 
 
        var img = document.createElement('img'); 
 
        img.src = canvas.toDataURL(); 
 
        return img; 
 
       }); 
 
      }, 
 
      toJpeg: function(quality) { // quality should be between 0-1 
 
       quality = quality || 1.0; 
 
       (function(q) { 
 
        this.toCanvas(function(canvas) { 
 
         var img = document.createElement('img'); 
 
         img.src = canvas.toDataURL('image/jpeg', q); 
 
         return img; 
 
        }); 
 
       })(quality); 
 
      }, 
 
      downloadPng: function(filename) { 
 
       filename = filename || 'image.png'; 
 
       if (isPng()) { 
 
        // it's a canvas already 
 
        downloadImage(encodedData, filename); 
 
        return; 
 
       } 
 

 
       // convert to canvas first 
 
       this.toCanvas(function(canvas) { 
 
        downloadImage(canvas.toDataURL(), filename); 
 
       }); 
 
      } 
 
     }; 
 
    }, 
 

 
    fromSvg: function(svgElement) { 
 
     var svgString = new XMLSerializer().serializeToString(svgElement); 
 
     return new this.OutputProcessor('data:image/svg+xml;base64,' + window.btoa(svgString), svgElement); 
 
    }, 
 

 
    fromCanvas: function(canvasElement) { 
 
     var dataUrl = canvasElement.toDataURL(); 
 
     return new this.OutputProcessor(dataUrl); 
 
    } 
 

 
}; 
 

 
// script.js 
 
var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 

 
$('#uploadImage').on('change', function(event) { 
 
    var img = new Image(); 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    img.src = e.target.result; 
 
    }; 
 
    reader.readAsDataURL(event.target.files[0]); 
 

 
    img.onload = function() { 
 
    // draw white background 
 
    context.beginPath(); 
 
    context.rect(0, 0, 500, 500); 
 
    context.fillStyle = "white"; 
 
    context.fill(); 
 

 
    // draw uploaded image 
 
    var scale = Math.min((canvas.width/img.width), (canvas.height/img.height)); 
 
    context.drawImage(img, 0, 0, img.width, img.height, (canvas.width - img.width * scale)/2, (canvas.height - img.height * scale)/2, img.width * scale, img.height * scale); 
 
    }; 
 

 
}); 
 

 
$('#btnCapture').on('click', function() { 
 
    ReImg.fromCanvas(canvas).downloadPng(); 
 
});

#canvas { 
 
    border: 1px solid seagreen; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Resize Image</title> 
 
</head> 
 

 
<body> 
 
    <input id="uploadImage" type="file" accept="image/*" /> 
 
    <button id="btnCapture" type="button">Capture</button> 
 
    <canvas id="canvas" height="500px" width="500px"></canvas> 
 

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

 
</html>

Answer 1

私は答えを見つけました。これはキャンバスをdataURIに変換してからdataURIをFileに変換するだけで簡単に解決できます。 canvasからdataURIへのスニペットは次のように行うことができます。 次に、Convert Data URI to File then append to FormData。

var imgB64 = canvas.toDataURL('image/png');