摘要:本文讲解了Html5 IOS端上传图片出现角度旋转的解决方法,希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
html页面
<div class="uploadImage"><input type="file"></div><img id="myImage"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="js/exif.js"></script><script type="text/javascript" src="js/uploadImage.js"></script>
exif.js是获取图片角度的javascript插件
uploadImage.js
$(".uploadImage input").change(function () { selectFileImage($(this)[0]); }); function selectFileImage(fileObj) { var file = fileObj.files[0]; // 图片方向角 var Orientation = null; if (file) { var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式 if (!rFilter.test(file.type)) { alert("请选择jpeg、png格式的图片"); return; } //获取照片方向角属性 EXIF.getData(file, function () { EXIF.getAllTags(this); Orientation = EXIF.getTag(this, 'Orientation'); }); } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var image = new Image(); image.src = e.target.result; image.onload = function () { var canvas = document.createElement("canvas"); canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight); var base64 = null; if (Orientation != "" && Orientation != 1 && Orientation != undefined) { var width = this.naturalWidth; var height = this.naturalHeight; switch (Orientation) { case 6://需要顺时针90度旋转 canvas.width = height; canvas.height = width; ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -height); break; case 8://需要逆时针90度旋转 canvas.width = height; canvas.height = width; ctx.rotate(-90 * Math.PI / 180); ctx.drawImage(this, -width, 0); break; case 3://需要180度旋转 ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -width, -height); break; } } base64 = canvas.toDataURL("image/png"); $("#myImage").attr("src", base64); }; }; }
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号