q42-cms-components/tools/image-preview.js

/* Image compression algorithm:
For small images the bulk of the jpeg data is the header.
We're going to assume the header is the same for all images, except the part that indicates the width and height.
So we'll store only this bit (width and height) and the actual content of the image. */

const Version = 'B';
const SOF0Pattern = "\u00ff\u00c0";
const SOSPattern = "\u00ff\u00da";
const HeaderSizeLength = 4;

function splitUp(cnv) {
  var parts = cnv.toDataURL('image/jpeg', 0.7).split(',');
  var prefix = parts[0] + ',';
  var base64 = parts[1];
  var raw = window.atob(base64);

  var indexC0 = raw.indexOf(SOF0Pattern);
  if (indexC0 == -1) return;

  var indexBodyStart = raw.indexOf(SOSPattern);
  if (indexBodyStart == -1) return;

  var headerSizeIndexStart = indexC0 + 5;
  var headerSizeIndexEnd = headerSizeIndexStart + HeaderSizeLength;

  var indexBodyTripletStart = Math.floor(indexBodyStart / 3) * 4;
  var headerSizeIndexTripletStart = Math.floor(headerSizeIndexStart / 3) * 4;
  var headerSizeIndexTripletEnd = Math.ceil(headerSizeIndexEnd / 3) * 4;

  var headerBeforeSize = base64.substring(0, headerSizeIndexTripletStart);
  var headerAfterSize = base64.substring(headerSizeIndexTripletEnd, indexBodyTripletStart);

  var body = Version +
    base64.substring(headerSizeIndexTripletStart, headerSizeIndexTripletEnd) +
    base64.substring(indexBodyTripletStart);

  return { prefix, headerBeforeSize, headerAfterSize, body };
}

export function compress(cnv) {
  return splitUp(cnv).body;
}

export function decompress(base64data) {
  if (base64data.charAt(0) != 'B') {
    throw "Unsupported version of preview data";
  }

  const versionIndexLength = 1;
  const headerSizeTripletLength = 8; // headerSizeLength is 4 bytes, so always 2 triplets, takes 8 bytes in base64

  return /*prefix+headerBeforeSize*/ "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAAR" +
    base64data.substr(versionIndexLength, headerSizeTripletLength) +
    /*headerAfterSize*/ "ASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6" +
    base64data.substr(versionIndexLength + headerSizeTripletLength);
}