Прикрепление изображения (base64) в input type="file"

Question

Есть форма

<form method="post" action="pixels.php" enctype="multipart/form-data">
<input type="file" name="graphic" style=" font-size:14px;" value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABkCAYAAABnwAWdAAABmklEQVR4Xu3dQYrDQBADQM//Hz0hxg74lFMLC2ofMNuoVfRl8a699z6aftaambYtBou7emBxMyB+rxJ3RrGII26Y2vU8ccQ9mubGDcMjjjjihpE9nieOOOKISyZAHHHJvrlxxBFHXDIB4ohL9s2NI4444pIJEEdcsm9uHHHEEZdMgDjikn1z44gjjrhkAsQRl+ybG0ccccQlEyCOuGTf3DjiiCMumQBxxCX75sYRRxxxyQSI6xZ3HF3fOYl3+52/cG2Le+dm/kxlcZVr+37nhLjK1Vlc5dqIK12bxVlcbQKlg7txFleaQOnYxFlcaQKlYxNncaUJlI5NnMWVJlA6NnEWV5pA6djEWVxpAqVj+4cR9+J8vn64wv4g9gyYOOKGpd3PE0fco2pu3LA84ogjbhjZ43niiCOOuGQCxBGX7JsbRxxxxCUTII64ZN/cOOKIIy6ZAHHEJfvmxhFHHHHJBIgjLtk3N4444ohLJkAcccm+uXHEEUdcMgHiiEv2zY0jjjjikgkQR1yyb24cccQRl0yAOOKSfXPjzrQ/uGEHG1llpcwAAAAASUVORK5CYII="><br>
<input type="submit" value="Загрузить">
</form>

Пытаюсь прикрепить изображение (base64) к input, base64 берет из другого рисовальщика через localstorage, оттуда получилось поставить только в value.

По плану должно быть так, рисуем, идем на другую страницу, там через onload из localstorage вставляется в input, и при нажатие загрузить должен подхватить файл (уже jpg).

Answer 1

https://developer.mozilla.org/ru/docs/Web/API/File/Using_files_from_web_applications
https://developer.mozilla.org/ru/docs/Web/API/FileList

FileList
var file = document.getElementById('fileItem').files[0];
https://developer.mozilla.org/ru/docs/Web/API/File
https://developer.mozilla.org/ru/docs/Web/API/Blob

Пример

!
! Не забудь обратить внимание на // TODO: !!!
! А так же - на версии браузеров и совместимость. (смотри по ссылкам внизу)
!

/**
 * @type {HTMLInputElement}
 */
const el = ff.graphic
el: {
  const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
    new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
  const type = undefined; // TODO: добавить тип файла
  dT.items.add(
    new File(
      [dataURItoBlob(f())], 'someImageName', {
        type
      }
    )
  )
  el.files = dT.files;
  console.log(`el.files[0].type: [${el.files[0].type}]`)

  function f() {
    return `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABkCAYAAABnwAWdAAABmklEQVR4Xu3dQYrDQBADQM//Hz0hxg74lFMLC2ofMNuoVfRl8a699z6aftaambYtBou7emBxMyB+rxJ3RrGII26Y2vU8ccQ9mubGDcMjjjjihpE9nieOOOKISyZAHHHJvrlxxBFHXDIB4ohL9s2NI4444pIJEEdcsm9uHHHEEZdMgDjikn1z44gjjrhkAsQRl+ybG0ccccQlEyCOuGTf3DjiiCMumQBxxCX75sYRRxxxyQSI6xZ3HF3fOYl3+52/cG2Le+dm/kxlcZVr+37nhLjK1Vlc5dqIK12bxVlcbQKlg7txFleaQOnYxFlcaQKlYxNncaUJlI5NnMWVJlA6NnEWV5pA6djEWVxpAqVj+4cR9+J8vn64wv4g9gyYOOKGpd3PE0fco2pu3LA84ogjbhjZ43niiCOOuGQCxBGX7JsbRxxxxCUTII64ZN/cOOKIIy6ZAHHEJfvmxhFHHHHJBIgjLtk3N4444ohLJkAcccm+uXHEEUdcMgHiiEv2zY0jjjjikgkQR1yyb24cccQRl0yAOOKSfXPjzrQ/uGEHG1llpcwAAAAASUVORK5CYII=`
  }
  console.log(`f().length`, f().length) // 646
}
// --------------------------------------------------------------------
const img = document.body.appendChild(
  document.createElement('img')
)
img: {
  if (!el.files[0]) throw new Error('!el.files[0]')
  var fr = new FileReader();
  fr.onload = () => {
    img.src = fr.result;
    console.log(`fr.result.length`, fr.result.length) // 661
  }
  fr.readAsDataURL(el.files[0]);
}
// --------------------------------------------------------------------
function dataURItoBlob(dataURI, callback) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var bb = new Blob([ab]);
  return bb;
}

<form name="ff" method="post" action="pixels.php" enctype="multipart/form-data">
  <input type="file" name="graphic" style=" font-size:14px;"><br>
  <input type="submit" value="Загрузить">
</form>

Пример был написан по эти материалам:

БЛОГ НА HUSL

Прикрепление изображения (base64) в input type="file"

Ответы (1 шт):

Пример