我需要上传图片。在上传图像之前,我从文件输入中获取它,使用画布调整它的大小,然后将结果保存为 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)
谢谢你的帮助 :)