用Ajax上传DOM图像-将图像转换为文件

Question

我需要做一个图像上传。在上传图像之前，我将其从文件输入中取出，使用画布调整其大小，并将结果保存为DOM中的图像元素。我怎么能把我的图像对象到一个文件对象，所以我可以使用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)

谢谢你的帮助

Answer 1

您可以使用canvas.toDataURL()获得base64编码的字符串，如果它。将其发送到服务器，解码并保存为文件。