javascript를 사용하여 Base64로 인코딩 된 데이터 URI PNG의 크기를 조정하는 방법은 무엇입니까?

Question

난으로받는 이미지 크기를 조정하기 위해 자바 스크립트 또는 풍미의 일부 방법이 있나요 내가 데이터 URI

<img src="data:image/png;base64, --base64 png-- "> 

를 사용하여 표시 할 것을, 웹 페이지에 웹 소켓의 압박이 Base64로 인코딩 된 PNG를 주어진 이미지의 썸네일 버전을 dinamically 생성하는 것과 같이 더 작은 base64 데이터 URI?

어쩌면 HTML 이미지 객체를 복제하여 전체적으로 재생할 수 있습니다. 아직 알지 못하는 애매한 jQuery 마법 트릭을 사용합니다.

클라이언트 측 JavaScript에서이 작업을 수행 할 수 있다면 서버 deamon에 대한 다른 HTTP 요청을 피할 수 있습니다. 이렇게하면 크기 조정 된 이미지를 다시 처리하고 전달하는 데 시간이 걸릴 수 있습니다.

Answer 1

jQuery를 사용하여 이미지를 복제 할 수 있으며, 크기를 조정할 때 html 요소의 너비와 높이가 변경 될 수 있습니까?

$('.somewhere img').clone().appendTo('.elsewhere').width(16).height(16) 

Answer 2

maxImage 플러그인은 이미지의 크기를 조정할 수 있다고 주장합니다. TMMV, 나 자신을 시도하지 않았습니다.

Answer 3

Pixastic 라이브러리는 모바일 장치에서도 놀랍도록 빨리 작동합니다.

이가 someting 같은 시도 :

Pixastic.process(image, "resize", { "width" : 200, "height" : 200 }, function (oCanvas){ //callback code here}); 

난 당신이 그것을 이미지를 제공하고 캔버스를 반환한다는 사실에 불구하고 분투, 나에게 무슨 일이 있었는지 이해할 수 주했다! 이제 Canvas2Image를 사용하여 웹의 어딘가에서 이미지로 돌아 왔습니다.