如何用JS改变图像的原始大小

[woshizj267]

如何改变图像的真实大小，实现网页上传任意大小的图像？

我想从本地上传一张图片，上传之前我想对其降采样或者放大，我改变image.width和image.height可以让图片以任意大小显示，但是上传的时候任然是上传的原图。
想问哈各位大神如何才能真正的改变图片的大小，实现上传任意大小的图片？
这是我调试的代码：

<input id="input_upload"  type="file"/ >
<canvas id="canvas" style="border:1px solid #c3c3c3;" ></canvas>

用input选择图像文件，用canvas显示，后面再用canvas的内容上传。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

$('input[type=file]').change(function(){

        var file=this.files[0];
        var reader=new FileReader();
		var image=new Image();

        reader.readAsDataURL(file);
        reader.onload=function(){
            // 通过 reader.result 来访问生成的 DataURL
            var url=reader.result;
            image.src=url; 
            alert(image.width);
            alert(image.height);
            image.height /=4;
            image.width /=4; 
            canvas.setAttribute("width", image.width+"px");
            canvas.setAttribute("height", image.height+"px");
            alert(image.naturalWidth);
            alert(image.naturalHeight);
        	context.drawImage(image,0,0,image.width,image.height);
        };
	});

首先我对上传的图片的width和height做一定变换，然后改变canvas的大小显示，这里是可以以任意大小显示图像的，这也是网上很多人说的“自适应”改变图像大小，或者预览图像所使用的方法，但是后来我用canvas的内容上传，图片的分辨率还是原始文件的大小！
有没有什么方法可以在前端就改变要上传图片的大小，减小体量，减轻服务端的压力？

[hch126163]

服务器 压缩，裁剪 图片

[woshizj267]

大神快到碗里来~~~

[woshizj267]

引用 2 楼 Plert 的回复:

用图像处理工具去，Win自带画图或PS等，Web前端技术不会去改变文件原始属性......

用HTML5的canvas可以做到

[woshizj267]

引用 4 楼 hch126163 的回复:

服务器 压缩，裁剪 图片

服务器来做这事有点繁琐

[woshizj267]

我来仔细看了canvas的用法，context.drawImage(image,0,0,image.width,image.height)之后用canvas.toDataURL()把调整大小后的图片转换为url就可以了，可以参照这篇文章：http://segmentfault.com/a/1190000000754560

[Plert]

用图像处理工具去，Win自带画图或PS等，Web前端技术不会去改变文件原始属性......

[KK3K2005]

然后改变canvas的大小显示。。。 －－－》 这个改成 将图片以指定的大小 绘制到canvas上

[IceYang-]

博主解决这个问题了吗 我也遇到了！ 同求解决方法！！！