Как изменить размер PNG URI в кодировке Base64 с помощью JavaScript?

Question

У меня PNG в кодировке Base64, выдвинутый из веб-сокета в веб-страницу, который я отображаю, используя Data URI

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

Есть ли способ в javascript или некоторых его разновидностях изменить размер получаемого мной изображения в меньший эквивалент URI данных base64, чтобы динамически генерировать уменьшенную версию данного изображения?

Или, может быть, я мог бы просто продублировать объект HTML-изображение и поиграть с ним в целом, используя какой-то неясный фокус JQuery, который я еще не обнаружил.

Если это можно сделать в javascript на стороне клиента, я мог бы избежать повторного HTTP-запроса к моему серверу deamon, что потребовало бы некоторого времени для повторной обработки и доставки измененного изображения.

Answer 1

Вы можете клонировать изображение с помощью jQuery, а что касается изменения размера - может быть, тривиальное изменение ширины и высоты HTML-элемента?

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

Answer 2

Библиотека Pixastic сделает это, и она будет работать удивительно быстро, даже на мобильном устройстве.

Попробуйте что-то вроде:

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

Я боролся с тем фактом, что вы даете этоизображение и возвращение холста, мне потребовались недели, чтобы понять, что происходит !!!Теперь я использую Canvas2Image, который нашел где-то в сети, чтобы вернуться к изображению.

Answer 3

Плагин maxImage утверждает, что может изменять размеры изображений.TMMV, я сам не пробовал.