Skip to main content
Known Participant
March 23, 2022
Answered

illustrator script to convert the base64 into image

  • March 23, 2022
  • 1 reply
  • 4685 views

Hi All,

 

Is it poosible to convert the base64 code(from json) into image(png/jpg) using script? And need to save the converted images into local desktop.

 

Thanks

This topic has been closed for replies.
Correct answer Inventsable
Please download the attached file to view this post

1 reply

Mylenium
Legend
March 23, 2022

You could probably decode it inside a CEP panel, but there it doesn't do you any good. That's probably a taks better suited to a web browser with a respective JS library that simply renders the image as a web page from where it can be saved as an image.

 

Mylenium

Rocky@Author
Known Participant
March 23, 2022

Thanks Mylenium for the update. Could you please share any code to decode in cep panel or web browser? 


 

Inventsable
Legend
March 24, 2022

You'd use the Canvas API. Say we have a canvas element somewhere in our HTML:

<canvas id="canvas" />

Setting it's data as base64 is relatively simple:

  // Grab canvas element, then utility variables:
  let canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    image = new Image();

  // Manually write in base64 as it's source attribute:
  image.src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=";

  // Then during it's loaded lifecycle
  image.onload = function () {
    // Force a redraw of the image to ensure it displays correctly:
    context.drawImage(image, 0, 0);
  };

 If at any point we want this as PNG after having done the above:

let myPNGimageData = canvas.toDataURL("image/png");

 If you have issues, just search for the steps:

  • "HTML canvas base64"
  • "HTML canvas download png"