JavaScript JPEG mask selective image compression

Question

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().