javascript изменить размер изображения [уменьшить размер] и загрузить - PullRequest
Новая
       31

javascript изменить размер изображения [уменьшить размер] и загрузить

3 голосов
/ 01 декабря 2011

Можно ли изменить размер изображения с помощью JavaScript или Flash?

Мое требование:

Пользователь, загружающий изображение размером 10 МБ, я хочу изменить размер изображения на стороне клиентаиспользуя Javascript или flash, после изменения размера изображения его необходимо загрузить на сервер.

Если возможно, я могу сохранить пропускную способность.

Я использую uploadify для загрузки изображений и Codeigniter.на стороне сервера.

есть ли другие способы сделать это?

Примечание: Ссылка на некоторые библиотеки действительно полезна.

Спасибо.

Ответы [ 3 ]

5 голосов
/ 01 декабря 2011

Да, это возможно в Flash Player 10 и более поздних версиях.

Это старая запись в блоге, когда Flash Player 10 и функция FileReference.load () были новы, еще в 2008 году, ине охватывает все необходимые шаги, но это начало:

http://www.mikechambers.com/blog/2008/08/20/reading-and-writing-local-files-in-flash-player-10/

Возможно, вам также понадобится изучить, как изменить размер растрового изображения в ActionScript, как кодировать растровое изображение какJPEG или PNG (с использованием as3corelib ) и способ загрузки результата на сервер.

Edit : http://www.plupload.com, похоже, поддерживает изменение размера.Также есть http://resize -before-upload.com /

4 голосов
/ 01 декабря 2011

Да, можно изменить размер изображения в javascript, используя HTML5 canvas API.Вам, однако, потребуется сохранить его где-нибудь после изменения размера.

  • Первый API, который вам нужно будет проверить, это drawImage.
  • Второйодин из них - toDataURL.

В зависимости от того, что вы хотите сделать, вы можете:

  • Заставить пользователя сохранить уменьшенное изображение, используяэтот клиентский скрипт .
  • Сохраните его самостоятельно, используя язык на стороне сервера, чтобы преобразовать Base64 Encoded Image в фактический файл изображения и сохранить его на своем сервере.Проверьте Пример 1 .

Пример 1: Решение на основе PHP5: 

<?php
    define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
?>

ОБНОВЛЕНИЕ № 2:

Как указано в комментариях ниже, для этого метода требуется современный браузер , который поддерживает файловые API .Вместо этого используйте метод flash для поддержки как современных, так и не HTML5-браузеров.

0 голосов
/ 17 марта 2014

Если вы используете JSON для загрузки, используйте следующий код 

function UploadPhoto(img) {

    var uri = "http://domain/App/AppService.svc/GetImg/New";
    var imgElem = document.getElementById(img);
    var imgData = JSON.stringify(getBase64Image(imgElem));

    alert(imgData);
    $.ajax({
        url: uri,
        contentType: 'application/json',
        dataType: 'json',
        type: 'POST',
        data: imgData,
        error: function () {
            alert('failed');
        },
        success: function () {
            alert('Sucess');
        }
    });


}
function getBase64Image(imgElem) {
    var width = 100;
    var height = 150;

    // imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0, width, height);
    ctx.scale(width, height)
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
...