html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

最新推荐文章于 2024-05-16 12:21:22 发布
最新推荐文章于 2024-05-16 12:21:22 发布
阅读量2.1w 收藏 13
点赞数 4
分类专栏： html5 文章标签： html5+exif.js+canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlzk/article/details/48654835
版权

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息，详见  http://code.ciaoca.com/javascript/exif-js/

这里主要用到Orientation属性。

Orientation属性说明如下：

旋转角度 参数
0°
最低0.47元/天 解锁文章
ZeekerLin
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
上传图片带预览功能.支持手机微信预览
05-24
网站开发和手机开发中,上传图片时候带预览功能.支持pc,手机,微信,都可以预览
html5移动端图片上传本地生成缩略图预览（单图上传）
11-19
html5移动端图片上传本地生成缩略图预览，单图上传
移动端图片上传预览
唔厌组的秋秋空间
10-13 1882
圖片說明（可選）编辑完成 + 提交
1024程序员节带你玩转图片Exif信息获取之JavaScript_exif-js
最新发布
2401_85011895的博客
05-16 358
1024是2的十次方，二进制计数的基本计量单位之一。1G=1024M，而1G与1级谐音，也有一级棒的意思。程序员就像是一个个1024，以最低调、踏实、核心的功能模块搭建起这个科技世界。1024程序员节是广大程序员的共同节日。从2015年起，每年10月24日定义为程序员节。以一个节日的形式，向通过coding改变世界，也以实际行动在浮躁的世界里，固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。在致敬技术的同时，有点程序猿（媛）们的自我调侃的意思。
JS使用H5实现图片预览功能
12-13
JS使用H5实现上传图片预览的功能，以下是代码的实现： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> [removed] //预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称 function yl(obj,id) { //FileReader if(window.FileReader){//验证当前的浏览器是否支持图片预览 var reader=new FileReader(); var fi
利用exif.js解决IOS手机H5页面拍照上传照片旋转90度问题
02-26
利用exif.js解决IOS手机H5页面拍照上传照片旋转90度问题: upLoadPic($inputBorn, $inpOutBorn, 1); 其中$inputBorn为type="file"的input, $inpOutBorn为展示图片用的盒子,盒子要给宽高,默认的情况下,图片是以背景图片展示的.如果需要更改展示方式可以在upLoadPic()函数中进行修改
html5+exif.js+canvas
09-22
实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, '...
html5+exif.js+mobileBUGFix.mini.js+canvas
02-04
实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, '...
html5+exif.js+mobileBUGFix.mini.js+canvas+ios90度修复
06-15
html5+exif.js+mobileBUGFix.mini.js+canvas 移动端图片上传预览压缩旋转，iOS90度...html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。
解决某些机型图片旋转 （exif.js ）
qq_42076140的博客
10-14 323
安装 NPM: npm install exif-js --save Bower: bower install exif-js --save 引用 import EXIF from 'exif-js'; 封装 const _rotateImg = (imgFile) => { return new Promise((resolve, reject) => { EXIF.getData(imgFile, function () {
HTML5+(html5 plus)
webxiaoma
04-06 1681
通过 HTML5 开发移动 App 时，会发现 HTML5 很多能力不具备。为弥补 HTML5 能力 的不足，HTML5 plus 才出现
HTML5 图片上传 带预览功能 (pc,手机都能适配)
06-22
HTML5 图片上传 带预览功能 (pc,手机都能适配) 支持预览 适配各种机型
html5+exif+canvas照片上传压缩旋转
01-22
实现手机端照片上传预览、压缩、旋转功能。 实现手机端照片上传预览、压缩、旋转功能。
js图片压缩并保留EXIF信息
qq_24466961的博客
01-14 460
1.html代码： <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w..
详解exif.js，应用于canvas照片倒转（海报H5）
weixin_30270561的博客
04-30 1302
业务背景，苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base64)解码EXIF.JS API1、EXIF.getData(img, callback)获取图像的数据，能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据。 2、EXIF.getTag(...
vue压缩图片，js压缩图片质量，非压缩长宽
weixin_43023873的博客
12-06 675
sfzfileListzm为图片啊file文件 核心 // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸) var file = item.file; // console.log('key',key); // console.log(file) ...
移动端 vue+vant 的uploader 实现上传、压缩、旋转图片功能
09-05
移动端Vue Vant的Uploader组件可以很方便地实现上传、压缩和旋转图片功能。首先，我们需要在Vue项目中引入Vue Vant库，并在需要使用Uploader的组件中注册该组件。 在页面中使用Uploader组件时，我们可以设置相关的属性来实现功能需求。首先是上传图片功能，可以通过设置`action`属性来指定图片上传的后端接口地址。上传成功后，可以通过监听`@success`事件来处理上传成功的逻辑，例如显示上传成功的提示信息或者将上传成功的图片URL保存到数据库等。 对于压缩图片的功能，我们可以使用该组件提供的`beforeRead`方法来获取用户要上传的图片文件对象。然后，利用`HTMLCanvasElement`的`toBlob`方法对图片进行压缩，并将压缩后的图片对象传给Uploader组件进行上传。在压缩图片时，可以设置压缩的尺寸或者压缩的质量、压缩比等参数，以控制压缩后的图片大小适应实际需求。 要实现图片旋转的功能，我们可以利用`EXIF.js`库来读取图片的EXIF信息，获取图片的拍摄方向。然后，根据拍摄方向来确定图片需要旋转的角度，再借助`canvas`的`rotate`方法对图片进行旋转。旋转后的图片可以在`@success`事件触发后重新渲染到页面上，或者直接发送到后端进行保存。 总结来说，移动端Vue Vant的Uploader组件通过设置相关属性和监听事件，配合压缩工具和EXIF库，可以非常方便地实现图片上传、压缩和旋转功能，满足移动端图片处理的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值