Question

是否可以使用javascript或Flash调整图像大小？

我的要求：

用户上传大小为10MB的图片，我希望使用Javascript或flash在客户端重新调整图像大小，在调整图像大小后，需要将其上传到服务器。

如果可以，我可以节省带宽。

我在服务器端使用uploadify上传图片和Codeigniter。

有没有其他方法可以做到这一点？

注意：参考某些库非常有帮助。

谢谢。

Answer 1

是的，可以在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）以及如何将结果上传到服务器。

修改：http://www.plupload.com似乎支持调整大小。还有http://resize-before-upload.com/

Answer 2

是的，可以使用HTML5 canvas API在javascript中调整图片大小。但是，您需要在调整大小后将其保存在某处。

您需要检查的第一个API是drawImage。
第二个是toDataURL。

根据您的目的，您可以：

让用户使用此client side script保存较小的图片。
使用服务器端语言自行存储，将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：

如下面的评论所述，此方法需要modern browser that supports File APIs才能生效。使用flash method代替现代和非html5浏览器。

Answer 3

如果您使用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,/, "");
}

javascript调整大小图像[缩小大小]并上传

3 个答案: