HTML5 : 캔버스에서 8 비트 회색조 JPEG 인코딩

웹 브라우저 클라이언트 측 기술 (html5/canvas/webgl/javascript)을 사용하여 Canvas에서 8 비트 그레이 스케일 JPEG를 쉽게 인코딩 할 수 있습니까?HTML5 : 캔버스에서 8 비트 회색조 JPEG 인코딩

이미지 처리 지식없이 사용할 수있는 바로 사용할 수있는 자바 스크립트 라이브러리가 있습니까? 브라우저 플러그인은 Flash를 제외하고는 옵션이 아닙니다. 그러나 나는 가능한 한 플래시를 선호하지 않는다.

알고리즘을 권장하지 마시고 도서관의 종류를 구현하는 데 도움이되는 링크를 사용하십시오.

세부 정보 : 사실, 저는 HTML5 File API를 사용하여 로컬 jpeg 이미지 파일을 서버에 업로드하는 것보다 8 비트 회색조 jpeg로 변환하는 것보다 읽기를 원합니다.

출처

2013-01-09 lembas

http://stackoverflow.com/questions/14174105/client-side-conversion-of-rgb-jpg-to-8-bit-jpg-using- canvashtml5 – Alex

아니요, 동일하지 않습니다. 그 질문에는 그것이 가능하고 링크 위키 피 디아 페이지라고 답변되어 있습니다. 그러나이 질문은 바로 사용할 수있는 라이브러리 또는 플래시를 포함 할 수도있는 스크립트에 대한 도움을 원합니다. – lembas

이것은 그림 조작에 도움이되는 라이브러리입니다 (http://www.pixastic.com/lib/). 하지만 압축으로는 도움이되지 않습니다. – Alex

alphaJPEG 방법은 알파 채널이있는 일반 PNG-24 및 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:

참조

출처

2013-02-12 02:20:15

저는 투명성이 없거나 투명성이 필요합니다. 이 기사를 사용하여 24 비트 jpeg를 8 비트 jpeg로 변환하는 방법을 이해할 수 없습니다. – lembas

HTML5 : 캔버스에서 8 비트 회색조 JPEG 인코딩

답변

관련 문제