Membuat Meme dengan javascript

 1. Javscript

          let image;

function preview(){

    let im = document.getElementById("foto")

    let imgUrl = URL.createObjectURL(im.files[0]);

    image = new Image();

    image.src= imgUrl;

    image.addEventListener("load",()=>{

      updateImage(image);    

    }, {once:true})

  }

function updateImage(img){

  let canvas = document.getElementById('card_canvas');

  let ctx = canvas.getContext('2d');

  let w = img.width;

  let h = img.height;

  canvas.width = 300;

  canvas.height = 300;

  ctx.drawImage(img, 0, 0 , 300, 300);

  // var imgData = ctx.canvas.toDataURL();  

            // silahkan di custom sendiri 

}

2. HTML

<input type="file" id="foto" onchange="preview()" />

<hr>

<canvas id="card_canvas"></canvas>

3 Helper javascript

function calc_image_size(video) {

    let y = 1;

    if (video.endsWith('==')) {

        y = 2

    }

    let x_size = (video.length * (3 / 4)) - y

    return Math.round(x_size / 1024)

}

function getBase64(file) {

  return new Promise((resolve, reject) => {

    let reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = error => reject(error);

  });

}