How use Javascript for img src base64 encode ?

Hello there!

I use img webp format. But Apple on devices this format not supported.

I'm trying to develop a solution with javascript. If the device is an ios device, I want to convert the picture src tag to base64. Can you help me?


var iOS = /^iP/.test(navigator.platform);

if(iOS == true){
  $('img').each(function(index,element) {

    //element.src = how base64 ?
    
  });
  
}

automica

5 years ago

Level 54

@app_dev something like this will do

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));

if you want to use a package to do it, the following also will do

https://www.npmjs.com/package/image-to-base64

1 like

artcore

5 years ago

Level 5

WebP official support has been added in Safari 14 https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes#Media

Just in time. I just rewrote my image system to just generate webp source sets ;)

1 like

Please or to participate in this conversation.