在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字符串传递给表单，因为它包含所有图像数据！

希望能有所帮助。