Adobe Fireworks allowed variable JPEG quality in masked regions, like this or this. Is this optimization available, specifically within the context of JavaScript on the front-end? I would like to know of a library, API, or custom encoding technique that does (or could) output the result. I admit the novelty was lost long ago, and JPEG2000/WebP is new, and there may be patent issues. There seems to be no discussion recently within a modern web context.

Edit 1: Here is an example of per-pixel image encoding. It would require a deeper understanding on my part of the JPEG format (compression). Unless there was a known technique, hence the question. Is the best routine to apply mask quadtree to RGB image and blur?

function getLittleEndianHex(value) {
  var result = [];
  for (var bytes = 4; bytes > 0; bytes--) {
    result.push(String.fromCharCode(value & 255));
    value >>= 8;
  }
  return result.join('');
}

// Set the required bitmap header
var header = 'BM' + getLittleEndianHex(16 * 16) + 
// size of the file (bytes)*
'\x00\x00\x00\x00\x36\x00\x00\x00\x28\x00\x00\x00'+ 
getLittleEndianHex(16) + getLittleEndianHex(16) +
// WxH
'\x01\x00\x20\x00\x00\x00\x00\x00\x00\x00\x00\x00\x13\x0B\x00\x00\x13\x0B\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00'; 
var W = '\xFF\xFF\xFF\xFF';//RGBA
var B = '\x00\x00\x00\xFF';//RGBA

Edit 2: I tried the method suggested in the comments. Generally, results show no benefit (in file size vs quality) relative to standard toDataURL().