Make Scalable Image.jsx

  /*
 /* Make Scalable Image.jsx
/*
// a photoshop script that outputs a range of sized images and the data-scalable markup needed to drop them into a webpage
// by Eric Portis
// in the public domain or whatever.

// adapted from here: http://extendscript.blogspot.com/2009/09/file-name-without-file-extension.html
baseName = function(doc) {
    var fullName = doc.name,
          finalDotPosition = fullName.lastIndexOf( '.' ) ;
    if ( finalDotPosition > -1 ) {
        return fullName.substr( 0 , finalDotPosition );
    } else {
        return fullName ;
    }
}

prettyBytes = function(bytes) {

    var units = [ 'bytes', 'kB', 'MB', 'GB', 'TB', 'PB' ];
    
    var x = parseInt(Math.log(bytes) / Math.log(1000)),
          y;
    
    if ( x > units.length - 1) {
        x = units.length - 1;
    }
    if (bytes == 0) { // hopefully not, but...
        y = 0, x = 0;
    } else if ( x > 1 ) { // add another digit of percision for big files
        y = Math.round( 10 * bytes / Math.pow(1000, x)) / 10;
    } else {
        y = Math.round( bytes / Math.pow(1000, x));
    }
    
    return y + ' ' + units[x];

}

doc = app.activeDocument; 

var w = doc.width.as('px'),
      h = doc.height.as('px'),
      wh = ( w > h ? 'width' : 'height'),
      thumbPx = '100',
      docBaseName = baseName(doc),
      
      sizeFileNames = [ 'full', 'half', 'quarter', '8th', '16th', '32nd' ], // next power of 2 that dosen't end in 'th' is 8092, so just algorithmically generate the rest
      sizeFancyNames = [ 'fullsize', 'half', 'quarter', 'eighth', 'sixteenth' ]; // these are for <a> text in our html; above 1/32nd we algorithmically generate these with numeric fractions,instead of words, w/ <sup> + <sub> tags

var subfolderName = "images";

var subfolderWithTrailingSlash = (subfolderName.length > 0 ? subfolderName + "/" : "")
var folderString = doc.path + "/" + subfolderWithTrailingSlash + docBaseName;
//var folderString = "/Users/portis/Desktop/images/" +docBaseName;
if ( !Folder( folderString ).exists ) {
    new Folder( folderString ).create();
};

var html = [];

var options = new ExportOptionsSaveForWeb();
options.quality = 60;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
options.interlaced = true;
options.includeProfile = true;

var newDoc = doc.duplicate(null,true);

newDoc.flatten();
newDoc.convertProfile('sRGB IEC61966-2.1', Intent.RELATIVECOLORIMETRIC, true, true);

for ( var i = 0, startPx = doc[wh].as( 'px' ); startPx / Math.pow( 2, i ) > thumbPx; i++ ) {

    var isFull = (i == 0);
    var isThumb = newDoc[wh].as( 'px' ) / 2 < thumbPx * 2;

    if ( isThumb ) {

        options.interlaced = false;
        
        var thumbW = (wh == 'width' ? thumbPx : thumbPx * (w/h) );
        var thumbH = (wh == 'height' ? thumbPx : thumbPx / (w/h) );
        newDoc.resizeImage( new UnitValue( thumbW, 'px' ), new UnitValue( thumbH, 'px' ), doc.resolution, ResampleMethod.BILINEAR );

    }  else if ( !isFull ) {
    
        newDoc.resizeImage( newDoc.width / 2 , newDoc.height / 2, doc.resolution, ResampleMethod.BILINEAR ); // I did some minimal testing and liked bilinear better -- no sharpening artifacts like bicubic?
       
    }
    
    var fileName= ( isThumb ? 'thumb' : ( sizeFileNames[i] || Math.pow( 2, i ) + 'th' ) ) + '.jpg',
          fancyName = ( sizeFancyNames[i] || '<sup>1</sup>&frasl;<sub>' + Math.pow( 2, i ) + '</sub>' ),
          saveFile = File( folderString+'/'+ fileName );

    newDoc.exportDocument( saveFile, ExportType.SAVEFORWEB, options );
    
    if ( !isThumb ) {
  
        var anchorElement = '\t\t<li><a href=\"' + subfolderWithTrailingSlash + docBaseName + '/' + fileName + '\"'
            + ' data-width=\"' + newDoc.width.as( 'px' ) + '\" data-height=\"' + newDoc.height.as( 'px' )+ '\">'
            + fancyName + ' ('
            + (isFull ? newDoc.width.as( 'px' ) + ' &times; ' + newDoc.height.as( 'px' ) + ' pixels, ' : '' )
            + prettyBytes(saveFile.length) + ')</a></li>';
        
         html.push(anchorElement);
     
    } else {

        var thumbElement = '<img src=\"' + subfolderWithTrailingSlash + docBaseName + '/' + fileName + '\"'
            + ' data-width=\"' + newDoc.width.as( 'px' ) + '\" data-height=\"' + newDoc.height.as( 'px' )+ '\" alt=\"\" />';
            
        html.unshift('\t<ul>');
        html.unshift('\t<p>View image:</p>');
        html.unshift('\t' + thumbElement);
        html.unshift('<div data-scalable>');
        html.push('\t</ul>');
        html.push('</div>');
                
    }
}


var htmlFile = new File(doc.path + "/" + docBaseName + ".html");
htmlFile.open('w','UTF-8');

// html = html.join('\n').toString();
// writing a string with \ns in it fails? we'll do it the hard way
for ( var i = 0, len = html.length; i < len; i++ ) {
    //$.writeln(html[i]);
    htmlFile.writeln(html[i]);
}

htmlFile.close();

newDoc.close(SaveOptions.DONOTSAVECHANGES);