3

画像をアップロードする必要があります。画像がアップロードされる前に、ファイル入力から取得し、キャンバスを使用してサイズを変更し、結果を画像要素として DOM に保存します。Image オブジェクトをファイル オブジェクトに変換して、ajax を使用してアップロードできるようにするにはどうすればよいですか?

編集：

これが私がしたことです：

$.fitIn = function( size, bbox ) {

    var r = size.w / size.h;

    if( r > bbox.w / bbox.h ) {
        var newW = bbox.w,
            newH = newW / r;

    } else {
        var newH = bbox.h,
            newW = newH * r;
    }

    return { w: newW, h: newH };
};

$.resizeImage = function( image, newW, newH, outputFormat ) {

    if( null == outputFormat ) {
        var temp = image.src.split( '.' );
        outputFormat = temp[temp.length - 1];
    }

    var canvas = document.createElement( 'canvas' );
    canvas.width = newW;
    canvas.height = newH;

    var context = canvas.getContext( '2d' );
    context.drawImage( image, 0, 0, newW, newH );

    var newImage = document.createElement( 'img' );
    newImage.src = canvas.toDataURL( 'image/' + outputFormat );

    return newImage;
};

$.createThumb = function( image ) {

    var newSize = $.fitIn(
        { w: image.width, h: image.height },
        { w: THUMB_W, h: THUMB_H }
    );

    return $.resizeImage( image, newSize.w, newSize.h, THUMB_FORMAT );
};

その後 ：

var originalImage = document.getElementById('testImage');
var newImage = lwf.resizeImage(originalImage, 480, 270);

($ は jquery ではありません)

ご協力いただきありがとうございます ：）

4

1 に答える 1

2

canvas.toDataURL() を使用して、base64 でエンコードされた文字列を取得できます。それをサーバーに送信し、デコードしてファイルとして保存します。

于 2013-01-04T19:34:00.860 に答える