Làm thế nào để thay đổi kích thước một dữ liệu mã hóa Base64 URI PNG bằng cách sử dụng javascript?

Question

Tôi có một Base64 mã hóa PNG vắt ra khỏi ổ cắm web vào một trang web, mà tôi hiển thị bằng dữ liệu URI

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

Có cách nào trong javascript hoặc một số hương vị của nó để thay đổi kích thước hình ảnh tôi nhận được vào một URI dữ liệu base64 nhỏ hơn tương đương, như để tạo ra một phiên bản hình thu nhỏ của hình ảnh đã cho?

Hoặc có thể tôi chỉ cần sao chép đối tượng Hình ảnh HTML và chơi với nó như một toàn thể, sử dụng một số ảo thuật tối nghĩa jQuery mà tôi chưa tìm ra.

Nếu điều này có thể được thực hiện bằng javascript ở phía máy khách, tôi có thể tránh một yêu cầu HTTP khác tới máy chủ deamon của tôi, việc này sẽ mất một chút thời gian để xử lý lại và cung cấp hình ảnh được chỉnh kích thước.

Answer 1

Bạn có thể sao chép hình ảnh bằng jQuery và để thay đổi kích thước - có thể chiều rộng và chiều cao thay đổi tầm thường của phần tử html?

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

Answer 2

Yêu cầu plugin maxImage để có thể thay đổi kích thước hình ảnh. TMMV, tôi đã không cố gắng điều này bản thân mình.

Answer 3

Thư viện Pixastic sẽ làm điều đó và hoạt động nhanh đáng ngạc nhiên ngay cả trên thiết bị di động.

Hãy thử someting như:

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

tôi vất vả mặc dù với thực tế mà bạn cung cấp cho nó một hình ảnh và nó trả về một Canvas, đưa tôi tuần để hiểu những gì đang xảy ra !!! Bây giờ tôi sử dụng Canvas2Image tôi tìm thấy ở đâu đó trên web để quay lại hình ảnh.