Image Designer

add image

by Salmin Skenderovic

HTML

<div class="flex">

  <form onsubmit="event.preventDefault();">
    <input type="file" id="my-file" onchange="previewFile()">

    <br>
    <hr><br>
    <button onclick="document.querySelector('#preview').className = 'bs-1'">1 per rad</button>
    <button onclick="document.querySelector('#preview').className = 'bs-2'">2 per rad</button>
    <button onclick="document.querySelector('#preview').className = 'bs-3'">3 per rad</button>
  </form>

  <div id="img-wrapper">
    <div id="img-box">
      <canvas id="preview"></canvas>
      <!--div id="preview" class="bs-1"></div-->
    </div>
    <img id="myImg" src="https://www.ehandelspase.se/skin/frontend/ultimo/epase/images/ehandelspase-sml.jpg" />
  </div>
</div>

CSS

/* 
background-image: url("https://www.ehandelspase.se/media/epase-uploads/9fthcsedleu7i7l2b5u8jf2124/bg0.png"); 
 background-size: 33%; 
 */

img {
  border: 1px solid;
}

#img-wrapper {
  position: relative;
}

#img-box {
  position: absolute;
  width: calc(100% - 132px);
  height: calc(100% - 55px);
  top: 50px;
  left: 66px;
  box-sizing: border-box;
}

#img-box #preview {
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
  justify-content: space-between;
}

JavaScript

const myImg = document.querySelector("#myImg");
const topLeft = [100, 100]; // X Y
const bottomRight = [345, 445]; // X Y

function previewFile() {
  var preview = document.querySelector('#preview');
  var file = document.querySelector('#my-file').files[0];
  var reader = new FileReader();

  reader.onload = function() {
    var img = new Image();
    img.onload = () => setImage(img);
    img.src = event.target.result;

  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    //preview.style.backgroundImage = "";
  }
}


function setImage(img) {
  var canvas = document.getElementById('preview');
  var ctx = canvas.getContext('2d');
  console.log(ctx, img)

  ctx.drawImage(img,0,0);
  
//	canvas.width = img.width;
  //canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
}