LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Download swatches zip

converts html color strings to .jpgs then creates a zip file to download.
choose colours, width, height, show/hide colour name
CSS
a{
  text-decoration:underline;
  cursor:pointer;
}
JS
/* using jszip and bobspace/css_colors.js
  https://github.com/Stuk/jszip
  https://gist.github.com/bobspace/2712980
*/
var show_images = true; // purely to add a bit of colour to the page. 
var addText = false || true;
var invertColor = true;
var color = "white";
var CSS_COLOR_NAMES = CSS_COLOR_NAMES || ['red','yellow','blue'];  // array of colours from bobspace/css_colors.js 
var w, h, src, image, tmpCanvas, canvas, context, name, zip;
canvas = tmpCanvas || document.createElement('canvas');
w = 100;
h = 100;
canvas.height = h;
canvas.width = w;
context = canvas.getContext('2d');
zip = new JSZip();

var previousColors = {};

for (var i = CSS_COLOR_NAMES.length - 1; i >= 0; i--) {
  name = CSS_COLOR_NAMES[i];
  context.fillStyle = name;
  if(previousColors[context.fillStyle]) continue; // check for duplication
  previousColors[context.fillStyle]=name;
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  if(addText){
    context.fillStyle = color;
    if(invertColor) {
      context.globalCompositeOperation = "difference";
    } else {
      if(name.toLowerCase() === color.toLowerCase()){
         context.fillStyle = (color.toLowerCase() === 'white') ? 'black' : 'white';
      }
    }
    context.font = "13px san-serif";
    context.textAlign = "center";
    context.textBaseline = 'middle';
    context.fillText(name+ '.jpg', 50,50);
  }
  dataurl = canvas.toDataURL('image/jpeg');
  context.clearRect(0, 0, canvas.width, canvas.height);
  if(show_images) {
    img = document.createElement('img');
    img.src = dataurl;
    img.width=w;
    img.height=h; 
    img.title = name + '.jpg';
    document.body.appendChild(img);
  }
  data = dataurl.substr(dataurl.indexOf(',') + 1);
  zip.file(name + '.jpg', data, {
    base64: true
  });
}
link = document.getElementById('link') || document.createElement('a');
link.download = "image.zip";
link.href = window.URL.createObjectURL(zip.generate({
  type: "blob"
}));

Description

Creates a downloadable zip file full of different coloured images. useful for eCommerce product variations
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv