在javascript或jQuery中將img src轉換為輸入文件

Question

如何將img src轉換為文件類型的輸入？

我正在使用webcamjs，它為我提供了一個看起來像這樣的圖像src的data_uri

 Webcam.snap(function(data_uri) { document.getElementById('my_result_front').innerHTML = '<img id="webcamImageToCropFront" src="' + data_uri + '"/>'; }); 

現在我需要將圖像源轉換成可以傳遞給表單的文件

 const data = new FormData(); data.append('file', document.querySelector('#id-file').files[0]); 

其中＃id-file是此類文件類型的輸入

 <input type="file" id="id-file" name="id-file" accept=".jpeg,.jpg,.png"> 

Answer 1

嘗試使用base 64像這樣的帖子進行轉換：將圖片網址轉換為Base64

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("webcamImageToCropFront"));

然后將base64字符串傳遞給表單，因為它包含所有圖像數據！

希望能有所幫助。