JavaScript Library For Multi-functional Image Converter – Reimg.js

Reimg.js is a very small JavaScript library for converting canvas or svg images into different formats (Base64, png, html image, etc.).

How to use it:

Download and load the reimg.js JavaScript file into your html page.

<script src="reimg.js"></script>

Convert canvas to base64.

function convertCanvasToBase64() {
  var base64 = ReImg.fromCanvas(document.querySelector('canvas')).toBase64();
  var output = document.querySelector('.output');
  output.innerText = '';
  output.innerText = base64;
}

Convert canvas to html img element.

function convertCanvasToImgElement() {
  var imgElement = ReImg.fromCanvas(document.querySelector('canvas')).toImg();
  var output = document.querySelector('.output');
  output.innerText = '';
  output.appendChild(imgElement);
}

Convert canvas to png.

function convertCanvasToPng() {
  var img = ReImg.fromCanvas(document.querySelector('canvas')).toPng();
  var output = document.querySelector('.output');
  output.innerHTML = '';
  output.appendChild(img);
}

Convert SVG to base64.

function convertSvgToBase64() {
  var base64 = ReImg.fromSvg(document.querySelector('svg')).toBase64();
  var output = document.querySelector('.output');
  output.innerText = '';
  output.innerText = base64;
}

Convert SVG to canvas.

function convertSvgToCanvas() {
  var svgElement = document.querySelector('svg');
  ReImg.fromSvg(svgElement).toCanvas(function(canvas) {
      var output = document.querySelector('.output');
      output.innerHtml = '';
      output.appendChild(canvas);
  });
}

Convert SVG to html img element.

function convertSvgToImgElement() {
  var imgElement = ReImg.fromSvg(document.querySelector('svg')).toImg();
  var output = document.querySelector('.output');
  output.innerText = '';
  output.appendChild(imgElement);
}

Convert SVG to png.

function convertSvgToPng() {
  var svgElement = document.querySelector('svg');
  var img = ReImg.fromSvg(svgElement).toPng();
  var output = document.querySelector('.output');
  output.innerHTML = '';
  output.appendChild(img);
}