如何用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的内容上传,图片的分辨率还是原始文件的大小!
有没有什么方法可以在前端就改变要上传图片的大小,减小体量,减轻服务端的压力?
...全文
2621 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
  • 打赏
  • 举报
回复
服务器 压缩,裁剪 图片
对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景)2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等)3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理)4-高级图形算法常见库(求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等)5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用)6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作)7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解)8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道)9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动)10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库)11-常见渲染以及透明度问题12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果)13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势)14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动)15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法)16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
英雄联盟Ruletext Checker 这是展示RiotGames的游戏“英雄联盟”角色信息规则文本的扩展。 日本规则文本符合RiotGames提供的数据。 由于我们只提到本地资源,网络上的信息和显示器之间可能存在差异。使用时请小心。 v 0.4.4 应用7.17.1日文数据文件 对应于Argot(重拍),该隐,Ohne v 0.4.1 应用7.8.1日文数据文件 对应于加里奥(翻拍),华威(翻拍),扎亚,拉康 V0.4.0 应用6.24.1的日语数据文件 对应刺客更新 对应于Iber-burn,Camille v 0.3.9 应用6.19.1日文数据文件 对应于Cred,Rise(Remake),Yorick(Remake) v 0.3.8 应用6.10.1日文数据文件 对应塔里亚 由于Probuild的URL已经改变,所以如下 v 0.3.7 申请6.8.1日文数据文件 新的tarric通信 对应一些冠军的图标变化 某些冠军的被动原始数据是“BadDesc”的手动对应。 v 0.3.6 应用6.6.1日文数据文件 (Jhin,AurelionSol另外) 由于Probuild返回,Champ屏幕右上方图标的Probuild链接功能被恢复。 修复以反映项目数据 v 0.3.5 应用6.1.1日文数据文件 (Kindred,Illaoi日文化) 修正了Mordekaiser的W和R字体大小错误(由于原始数据) 根据Wucon MonkeyKing的英文符号的原始数据(也在这里搜索) *项目附魔是鞋子图标,因为原始数据 v 0.3.3 将图标显示统一到Glyphicons上。 向Probuild Build Guide中添加一个链接图标给Champ的详细信息。 弹出窗口显示时,增加了一个关注搜索窗口的功能。 增加搜索功能时,增加了一个用回车键显示第一个冠军的功能。 v 0.3.0 重大翻新使用官方数据 v 0.2.3 吟游诗人兼容 v 0.2.2 对应于Tristana,Katarina的图标更新 v 5.3,v 5.4,修改更新 v 0.2.1 Ahri,Alistar图标更新支持 重绘绘图功能,加快速度 v 0.2.0 大大改善设计 进一步加快 项目功能的全功能实现 项目分类显示实施 *更新后首次激活时需要额外的权限。  因为这是由于拥有自己的存储空间,行为本身  几乎不变。点击确定即可。 v0.1.8 对应Rek'Sai 操作速度明显加快 将图像从jpg更改为png 实施项目的测试项目(英文) v0.1.5 对应于Kalista 反映仙后的规格变化 通过略微放大图标来测试提高可视性 依次到更新的图标 v0.1.4 阿西尔,锡安(新)一段时间 正如你可以从每个冠军的页面飞到ChampionSelect 对应于更新后的图标(Kog,Lee,Chogath,Akali,Sion,Renek,Shyvana) v0.1.3 对应于补丁4.13-4.14 添加Gnar 修正Soraka的E解释是错误的。 CSS的外观变化 v0.1.2 固定Alistar被动描述 减少js中不必要的部分 v0.1.1 对应于补丁v4.12 v0.1.0 更改为基于日语 - 维基的专有DB合规性 在搜索窗口附近显示相应的修补程序 与日文维基不对应的Patch v4.6-v4.11的独立通信 更新了Visual的更新图标 真正的生产Braum图标 v 0.08 补丁v4.7添加Braum作为预先对应 v 0.07 对应于补丁v4.5 v0.0.6 对应于补丁v4.4 黑默丁格的新图标信件 修正了Ryze没有出现在搜索中的错误 v0.0.5 对应于补丁v4.3 v0.0.4 对应于补丁v4.2 v0.0.3 *更改回图标 *调整一些文字的外观 *在一些文件中删除不必要的代码 *弹出式功能实现 v0.0.1 *第一次公开 支持语言:日本語

87,843

社区成员

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

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