html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器(老梗)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的。但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 5 步。步骤繁琐不说,当很多用户上传图片的时候也很影响服务器性能。
HTML5 的出现让我们可以更方便的实现这一需求。虽然这里所说的技术都貌似有点过时了(前端界的“过时”,你懂的),但还是有些许参考价值。在这里我只说一下要点,具体实现同学们慢慢研究。
下面奉上我自己写的一个demo,在输入框中选好自己服务器 url, 生成好图片后点击 Submit 上传,然后自己去服务器里看看效果吧~~
浏览器要求支持以下 Feature:
代码直接从现有项目移植过来,没有经过“太多的”测试,写的很乱,也没注释,大家就慢慢看吧。。。重点就在 js 脚本的 28 行,clipImage 函数中,同学们可以直接跳过去看。
第一步:获取文件
HTML5 支持从 input[type=file] 元素中直接获取文件信息,也可以读取文件内容。我们用下面代码就可以实现:
javascript$('input[type=file]').change(function(){
var file=this.files[0];
// continue ...
});
第二部:读取文件,并生成 Image 元素
这一步就需要用到 FileReader 了,这个类是专门用来读取本地文件的。纯文本或者二进制都可以读取,但是本地文件必须是经过用户允许才能读取,也就是说用户要在input[type=file]中选择了这个文件,你才能读取到它。
通过 FileReader 我们可以将图片文件转化成 DataURL,就是以 data:image/png;base64, 开头的一种URL,然后可以直接放在 image.src 里,这样本地图片就显示出来了。
javascript$('input[type=file]').change(function(){
var file=this.files[0];
var reader=new FileReader();
reader.οnlοad=function(){
// 通过 reader.result 来访问生成的 DataURL
var url=reader.result;
setImageURL(url);
};
reader.readAsDataURL(file);
});
var image=new Image();
function setImageURL(url){
image.src=url;
}
Image 就是在 html 里的 标签,所以可以直接插入到文档流里。
第三步:获取裁剪坐标
这一步没啥好说的,实现的方法也很多,需要获得下面四个裁剪框的坐标:
Y坐标
X坐标
高度
宽度
如下图所示:
第四部:裁剪图片
这是时候我们就需要用到 canvas 了,canvas 和图片一样,所以新建 canvas 时就要确定其高宽。这里我们还运用到 image.naturalHeight 和 image.naturalWidth 这两个属性来获取图片原始尺寸。
将图片放置入 canvas 时需要调用 drawImage ,这个接口参数比较多,在 MDN 上有详细的说明。
javascriptdrawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
因为我们用 canvas 只是用于裁剪图片的,所以需要新建一个 canvas 让它的尺寸和裁剪之后图片的尺寸相等,此时 canvas 就相当与我们的裁剪框。运用这个函数还可以将大图缩放成小图,同学们自己研究吧。
javascript// 以下四个参数由第三步获得
var x,
y,
width,
height;
var canvas=$('')[0],
ctx=canvas.getContext('2d');
ctx.drawImage(image,x,y,width,height,0,0,width,height);
$(document.body).append(canvas);
将 canvas 加入文档流之后,就可以看到裁剪后的效果了。不过我们还需要将图片上传至服务器里。
第五步:读取裁剪后的图片并上传
这时我们要获取 canvas 中图片的信息,用 toDataURL 就可以转换成上面用到的 DataURL 。 然后取出其中 base64 信息,再用 window.atob 转换成由二进制字符串。但 window.atob 转换后的结果仍然是字符串,直接给 Blob 还是会出错。所以又要用 Uint8Array 转换一下。总之这里挺麻烦的。。
javascriptvar data=canvas.toDataURL();
// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
data=data.split(',')[1];
data=window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
// canvas.toDataURL 返回的默认格式就是 image/png
var blob=new Blob([ia], {type:"image/png"});
这时候裁剪后的文件就储存在 blob 里了,我们可以把它当作是普通文件一样,加入到 FormData 里,并上传至服务器了。
FormData 顾名思义,就是用来创建表单数据的,用 append 以键值的形式将数据加入进去即可。但他最大的特点就是可以手工添加文件或者 Blob 类型的数据,Blob 数据也会被当作文件来处理。原生 js 可以直接传递给 xhr.send(fd), jquery 可以放入 data 里请求。
javascriptvar fd=new FormData();
fd.append('file',blob);
$.ajax({
url:"your.server.com",
type:"POST",
data:fd,
success:function(){}
});
然后你服务器里应该就可以收到这个文件了~
html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器(老梗)相关推荐
- html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...
使用html5 FileReader获取图片,并异步上传到服务器(not iframe) body{margin: 0px; background:#f2f2f0;} p{margin:0px;} . ...
- 本地ecshop网站怎么上传到服务器,ecshop 上传服务器
ecshop 上传服务器 内容精选 换一换 将SAP应用服务器迁移到华为云,有以下两种方法:用方法一:主机迁移服务SMS进行迁移用方法二:镜像导入的方式进行迁移.我推荐使用方法一进行迁移,但是对于源端 ...
- 为什么css效果在本地测试没问题,上传到服务器后却显示位置乱动,css下拉菜单本地正常,上传后360浏览器中显示错位,火狐、IE8显示正常...
匿名用户 1级 2014-04-15 回答 首先你使用 #header .row-2 ul li:hover 这样ie6就不支持了.ie6支持的hover目前我知道的只有a标签. 要单纯用css实现下 ...
- asp网站在本地可以添加新闻上传到服务器后字数太多就不能上传,asp 字数
asp 字数 内容精选 换一换 根据不同领域的语料训练特定领域的摘要模型,能有效提升文本摘要的效果.文本摘要(基础版)和文本摘要(领域版)基于不同算法实现,对相同文本,基础版和领域版的结果有所差别.根 ...
- HTML5 本地裁剪图片
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传更加 ...
- html5在线裁剪,HTML5 本地裁剪图片并上传至服务器(老梗)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- Vue - 实现图片裁剪功能,并上传到服务器(内置第三方最优秀的裁剪图片组件,上传到服务器功能)干净整洁无 BUG 的示例源码与超详细的注释,兼容任意浏览器
前言 您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
- cocos creator 调用相机相册裁剪图片并上传到服务器
大致思路就是creator里面js调用Java和object-c代码,调起系统相机相册,选取图库图片/拍照图片进行裁剪,然后转化为base64字符串,最后通过http post请求上传到服务器. Ja ...
- 微信小程序:从本地相册选择图片、相机拍照,并将所选图片上传到服务器
简介 小程序项目中有个需求:用户聊天时可以上传图片,还能支持拍照.于是学习了一下,分享给大家. 微信小程序中有个wx.chooseImage的方法可以快捷调用达到需求的效果. 具体实现 1.为了简化代 ...
最新文章
- Deep Manta:单目图像下2d到3d由粗到精的多任务网络车辆分析
- SIGTERM等信号含义【转】
- 高品质互动在线课堂:前端开发优化实践
- php+compose+使用,docker使用 docker-compose配置PHP环境(php+nginx+mysql)及启动
- 做技术的,这些观点真的扯淡!
- [JavaWeb-MySQL]多表查询概述
- HEVC/H265 性能分析
- android9.0 framewrok.jar push到system/framework不起作用,解决方式
- VMware vSphere client 5.1登录出现这个错误:客户端无法向服务器发送完整请求
- 重命名DC 以及 域
- Java程序线上运行CPU占用100%的处理方法
- 2.前端开发命名规范
- 大功率双路直流电机驱动板的设计源文件
- 【自然语言处理】【聚类】DCSC:利用基于对比学习的半监督聚类算法进行意图挖掘
- 微信小程序开发前准备
- 关于VLOOUP函数与index match函数
- 关于项目中数据库密码加密的使用
- Cesium 关于Bently模型的处理(dgn格式)
- Imperva之SecureSphere打补丁
- On the Grasshopper and the Cricket --John Keats 蝈蝈与蟋蟀 济慈
热门文章
- U盘启动和PXE启动的应用
- 中原银行java开发_2018中原银行校园招聘JAVA开发工程师公告
- mysql80版本连接 1251_解决Navicat Premium 连接 MySQL 8.0 报错1251的问题分析
- 时代天使IPO招股书:领先地位不明显,2019年市场份额不敌对手
- 微信小程序例子——打开微信小程序内置地图
- [python]-日志记录之logging
- 湖南卫视直播---流畅高清
- (召集)你喜欢什么类型的数字?
- win10系统使用yolov5,安装cuda、anaconda、pytorch、opencv避坑避雷最全讲解+常见问题解答
- java三大框架是什么?