HTML5：从画布编码 8 位灰度 JPEG [重复]答案

【问题标题】：HTML5: Encode 8 bit grayscale JPEG from canvas [duplicate]HTML5：从画布编码 8 位灰度 JPEG [重复]
【发布时间】：2012-12-23 08:31:49
【问题描述】：

有没有一种简单的方法可以使用 Web 浏览器客户端技术 (html5/canvas/webgl/javascript) 从 Canvas 编码 8 位灰度 JPEG？

是否有任何现成的 javascript 库可以在没有任何图像处理知识的情况下使用？除了 Flash，浏览器插件不是一个选项。但如果可以的话，我不喜欢 Flash。

请不要推荐有助于实现此类库的算法或任何链接。

详情：实际上，我想使用 HTML5 File API 读取本地 jpeg 图像文件，而不是将其转换为 8 位灰度 jpeg，而不是将其上传到服务器。

【问题讨论】：

stackoverflow.com/questions/14174105/…
不，不一样。该问题有一个答案说它是可能的并链接维基百科页面。但是这个问题需要关于现成库或甚至可能包含 Flash 的脚本的帮助。
这是一个帮助您处理图片的库：pixastic.com/lib。但它不会帮助您进行压缩。

标签： javascript html html5-canvas jpeg webgl

【解决方案1】：

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

<head>
  <style>img[data-alpha-src]{visibility: hidden;}</style>
</head>
<body>
  <img src="image.jpg" data-alpha-src="alpha.png" />
  <!--...-->
  <script src="ajpeg.js"></script>
</body>

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 &lt; imgs.length; i++)
    create_alpha_jpeg(imgs[i])

})();

In the head element I linked to FlashCanvas:

<!--[if lte IE 8]><script src="flashcanvas.js"></script><![endif]-->

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

参考文献

【讨论】：

我没有或不需要透明度。我不明白如何使用这篇文章将 24 位 jpeg 转换为 8 位 jpeg。