Javascript를 사용하여 이미지를 조작하려면 어떻게해야합니까?

Question

서버에 스크램블 된 형식의 이미지를 저장 한 다음 사용자에게 표시합니다. Javascript를 사용하여 클라이언트 측에서 이미지의 역 스크램블을 수행하고 싶습니다.

이렇게하는 방법이 있습니까? 이미지를 이진 객체로 조작하여이를 디 스크램블링하는 방법이 필요하다고 생각합니다.

Answer 1

당신은 base64로 스크램블을 할 수 있었던 결과 64 기수를 얻고 당신의 HTML에 img 태그에 삽입 한 후 자바 스크립트를 스크램블하고 그러나 당신의 스크램블링 알고리즘은 여전히 ​​사용자가 사용할 수 있습니다

<img alt="Embedded Image" 
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." /> 

- 많은 숨기거나 축소 할 때 전문 JS 프로그래머는 무슨 일이 일어나고 있는지 이해할 수 있습니다.

Answer 2

캔버스에 픽셀 데이터를 복사하고 거기에서 조작 할 수 있습니다. 여기에 사용할 수있는 확실한 대답이 있습니다. Get image data in JavaScript?

Answer 3

캔버스를 사용할 수 있습니다.

var img = new Image(); 
img.onload = function(){ 
    can.width = img.width; 
    can.height = img.height; 
    ctx.drawImage(img, 0, 0, img.width, img.height); 
} 
img.src = 'toto.jpg'; 

을 한 후, 당신은 이미지를 조작하는 문맥의 방법을 사용할 수 있습니다 :

var can = document.getElementById('canvas'); 
var ctx = can.getContext('2d'); 

로드 이미지와 캔버스에 그릴

https://developer.mozilla.org/en/canvas_tutorial