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

woshizj267 2015-06-23 10:28:11
如何改变图像的真实大小,实现网页上传任意大小的图像?


我想从本地上传一张图片,上传之前我想对其降采样或者放大,我改变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的内容上传,图片的分辨率还是原始文件的大小!
有没有什么方法可以在前端就改变要上传图片的大小,减小体量,减轻服务端的压力?
...全文
2678 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
IceYang- 2017-03-17
  • 打赏
  • 举报
回复
博主解决这个问题了吗 我也遇到了! 同求解决方法!!!
KK3K2005 2015-06-24
  • 打赏
  • 举报
回复
然后改变canvas的大小显示。。。 ---》 这个改成 将图片以指定的大小 绘制到canvas上
Plert 2015-06-24
  • 打赏
  • 举报
回复
用图像处理工具去,Win自带画图或PS等,Web前端技术不会去改变文件原始属性......
woshizj267 2015-06-24
  • 打赏
  • 举报
回复
我来仔细看了canvas的用法,context.drawImage(image,0,0,image.width,image.height)之后用canvas.toDataURL()把调整大小后的图片转换为url就可以了,可以参照这篇文章:http://segmentfault.com/a/1190000000754560
woshizj267 2015-06-24
  • 打赏
  • 举报
回复
引用 4 楼 hch126163 的回复:
服务器 压缩,裁剪 图片
服务器来做这事有点繁琐
woshizj267 2015-06-24
  • 打赏
  • 举报
回复
引用 2 楼 Plert 的回复:
用图像处理工具去,Win自带画图或PS等,Web前端技术不会去改变文件原始属性......
用HTML5的canvas可以做到
woshizj267 2015-06-24
  • 打赏
  • 举报
回复
大神快到碗里来~~~
hch126163 2015-06-24
  • 打赏
  • 举报
回复
服务器 压缩,裁剪 图片
一、主要内容:OpenCV能够实现强大丰富的图像处理,但是它缺少一个能够支持它运行的界面。Csharp经过多年的发展,得益于它的“所见及所得”能力,非常方便编写界面。这两者如果能够“双剑合璧”,将有效帮助实际工作产出。本课着重推荐GOCW采用“Csharp基于CLR直接调用Opencv编写的算法库”方法,能够将最新的OpenCV技术引入进来,同时保证生成程序的最小化。    为了进一步说明Csharp和OpenCV的结合使用,首先一个较为完整的基于winform实现答题卡识别的例子,相比较之前的实现,本次进一步贴近生产实际、内涵丰富,对算法也进行了进一步提炼。同时我们对WPF下对OpenCV函数的调用、OpenCV.js的调用进行相关教授。       二、课程结构1、 EmguCV、OpenCVSharp和GOCW之间进行比较(方便代码编写、能够融入最新的算法、速度有保障、方便调试找错、拒绝黑箱化);2、视频采集模块的构建,视频采集和图像处理之间的关系;3、视频采集专用的SDK和“陪练”系统的介绍;4、在视频增强类项目中和图像处理项目中,算法的选择;5、Csharp界面设计、图片的存储和其他构建设计;6、较为完整的答题卡识别例子,兼顾界面设计和算法分析;8、WPF基于GOCW也同样可以基于GOCW实现算法调用;webForm虽然也可以通过类似方法调用,但是OpenCV.JS的方法更现代高效。9、关于软件部署的相关要点和窍门。       三、知识要点:1、基本环境构建和程序框架;2、CLR基本原理和应用方法;3、接入、采集、模拟输入;4、图像处理,通过构建循环采集图片;5、增强和实时处理;6、基于投影等技术的答题卡识别算法;7、存储、转换;8、部署交付。        课程能够帮助你掌握Csharp调用Opencv的基本方法,获得相应框架代码和指导;从而进一步提升实现“基于图像处理”的解决方案能力。  

87,938

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧