JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

<div id='mydiv' contenteditable=true>
Lorem ipsum delor
</div>


<input type='file' value='Add' onChange='doImageFileInsert(this)'>

CSS

canvas, div {
    border:solid 1px grey;
    padding:10px;
    margin:5px;
    border-radius:9px;
}
img {
    width:100%;
    height:auto;
}

JavaScript

//--------------------------------------------------
function doImageFileInsert(fileinput) {
  var contenteditable = document.getElementById('mydiv');
  var newImg = document.createElement('img');
  //contenteditable.appendChild(newImg);


  var img = fileinput.files[0];
  let reader = new FileReader();
  reader.onload = (e) => {
    let base64 = e.target.result;
    newImg.src = base64;
    //doTest(newImg);
    newImg.onload = (e) => { doTest(newImg); };
  };
  reader.readAsDataURL(img);

  fileinput.value = ''; // reset ready for another file
}
//--------------------------------------------------
function doTest(imgElem) {
  console.log('doTest');
  var canvas = document.createElement("canvas");
  var w = imgElem.width;
  var h = imgElem.height;
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imgElem, 0, 0, w, h);

  canvas.toBlob(function(blob) {
    if (blob) {
      console.log('blob is good');
      //var contenteditable = document.getElementById('mydiv');
      //contenteditable.appendChild(canvas);
    } else {
      console.log('blob is null');
      alert('blob is null');
    }
  }, 'image/jpeg', 0.9);
}