html5 jpeg,HTML5：从画布编码8位灰度JPEG

alphaJPEG方法使用两个图像：一个正常的PNG-24和一个带alpha通道的PNG-24。它会生成一张带有透明度的8位JPEG。改为使用inverse alpha mask生成灰度8位JPEG。

ajpeg.js

(function() {

var create_alpha_jpeg = function(img) {

var alpha_path = img.getAttribute('data-alpha-src')

if(!alpha_path) return

// Hide the original un-alpha'd

img.style.visiblity = 'hidden'

// Preload the un-alpha'd image

var image = document.createElement('img')

image.src = img.src

image.onload = function() {

// Then preload alpha mask

var alpha = document.createElement('img')

alpha.src = alpha_path

alpha.onload = function() {

var canvas = document.createElement('canvas')

canvas.width = image.width

canvas.height = image.height

img.parentNode.replaceChild(canvas, img)

// For IE7/8

if(typeof FlashCanvas != 'undefined') FlashCanvas.initElement(canvas)

// Canvas compositing code

var context = canvas.getContext('2d')

context.clearRect(0, 0, image.width, image.height)

context.drawImage(image, 0, 0, image.width, image.height)

context.globalCompositeOperation = 'xor'

context.drawImage(alpha, 0, 0, image.width, image.height)

}

}

}

// Apply this technique to every image on the page once DOM is ready

// (I just placed it at the bottom of the page for brevity)

var imgs = document.getElementsByTagName('img')

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

create_alpha_jpeg(imgs[i])

})();

In the head element I linked to FlashCanvas:

... and I threw in this to avoid a flicker of the un-alpha’d JPEG:

参考