canvas转成input-file标签数据使用XMLHttpRequest模仿input-file标签上传数据

canvas转成input-file标签数据使用XMLHttpRequest模仿input-file标签上传数据

var canvas = document.getElementById("myCanvas");
var dataURL = canvas.toDataURL("image/png");
var blob = dataURLToBlob(dataURL);
var file = new File([blob], "canvas.png", { type: "image/png" });

var formData = new FormData();
formData.append("file", file);

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(formData);

function dataURLToBlob(dataURL) {
  var byteString = atob(dataURL.split(",")[1]);
  var mimeString = dataURL.split(",")[0].split(":")[1].split(";")[0];
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
}