LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

JPG+PNG to SVG Mask

For an easier process, give JPNG.svg a try.

Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an <img src="image.svg"/> tag, or as a background-image.

Tested in the latest versions of Chrome, Firefox and Safari. This SVG technique's compatibility via an <img /> tag or as a background-image may not be perfect. See this pen to test on your browser. Inline seems to be the best option for compatibility, in which case you should use external assets so that they can be cached. Please fork or comment to improve.

To get started, upload two images:

  • One as your primary image, named whatever (Try this one)
  • One as a mask (Black and white. PNG is usually best, like this one) with -mask or -alpha in the filename .

Upload:

Example:

CSS
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
.container {
  padding: 20px;
  margin: 0 auto;
}
h1 {
  margin: 0;
}
.jpng {
  display: block;
  color: #4E1E1E;
  text-decoration: none;
  background: #FBE6A2;
  padding: 0.75em 1em;
  text-align: center;
}
.jpng:hover,
.jpng:focus {
  outline: solid 3px;
}
#upload {
  background: #EEE;
  text-align: center;
  padding: 20px;
  display: block;
  cursor: pointer;
}
#upload input {
  cursor: pointer;
  margin-bottom: 10px;
}
#output {
  display: none;
}
#code {
  font-family: monospace;
  font-size: 12px;
  display: block;
  width: 100%;
  height: 150px;
  overflow: auto;
  background: #DDD;
  border: none;
  word-break: keep-all;
}
.examples {
  text-align: center;
}
.example {
  display: inline-block;
  width: 30%;
  text-decoration: none;
}
.example img {
  max-width: 100%;
  height: auto;
}
JS
console.clear();

// SVG alpha mask idea from https://gist.github.com/peterhry/afac4906f2b330509fc7
var template = '\n	\n		\n		\n 		\n	\n	\n',
    images = {
      "mask": { "loaded": false },
      "image": { "loaded": false }
    };


function svgOutput() {
  // Wait until mask and image are loaded
  if ( images.mask.loaded === true && images.image.loaded === true ) {
    console.table(images);
  
    var output = document.getElementById("output"),
        code = document.getElementById("code"),
        preview = document.getElementById("preview"),
        formatted = template;

    formatted = formatted.replace(/{{image.height}}/g,images.image.data.height);
    formatted = formatted.replace(/{{image.width}}/g,images.image.data.width);
    formatted = formatted.replace(/{{image.src}}/g,images.image.data.src);
    formatted = formatted.replace(/{{mask.width}}/g,images.mask.data.width);
    formatted = formatted.replace(/{{mask.height}}/g,images.mask.data.height);
    formatted = formatted.replace(/{{mask.src}}/g,images.mask.data.src);

    // Give a preview the user can click to download
    preview.innerHTML = "" +formatted + "";

    code.innerHTML = formatted.replace(//g,">");

    output.style.display = "block";
  
    // Reset images
    images = {
      "mask": { "loaded": false },
      "image": { "loaded": false }
    };
  
    return formatted;
  }
}


function imageToObject(image) {
  
  var src = image.result;
  var type = image.type;
  
  image.data = {};
  image.data.src = src.replace("data:;","data:" + type + ";");

  var img = document.createElement('img');
  
  img.src = src;
  img.style.display = "none";
  document.body.appendChild(img);
  
  // Wait for img to load to get accurate width & height
  img.onload = function () {
    image.data.height = this.height;
    image.data.width = this.width;
    image.loaded = true;
    document.body.removeChild(this);
    svgOutput();
  };
  
  return image;
}


// Image to Data URI conversion adapted from http://www.techmcq.com/article/Converting-an-image-into-data-URI-using-JavaScript-FileReader/61
function fileSelected(evt) {
  var files = evt.target.files;

  for (var i = 0; i < files.length; i++) {

    var f = files[i],
        role = "image";
    
    if ( f.type.indexOf("image") == 0 ) {
      console.log("image!");

      if ( f.name.indexOf("-mask") > 0 || f.name.indexOf("-alpha") > 0 ) {
        role = "mask";
      }

      if ( images[role].loaded === false ) {

        images[role] = new FileReader();
        images[role].loaded = "pending";
        images[role].type = f.type;
        images[role].name = f.name;
        
        images[role].onload = function(){
          imageToObject(this);
          svgOutput();
        }
        
        images[role].readAsDataURL(f); //on successful read, fr.onload function will be called and that will populate the result in fileContent container
       
      }
    }
  }
}
   
  //attach change event of file control
document.getElementById('files').addEventListener('change', fileSelected, false);
Host Instantly Drag and Drop Website Builder

 

Description

Combine the transparency of a PNG with the compression of a JPEG.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID