xxw1028
2014-12-30 19:28:41
证
html5实现图片旋转源代码下载
业务背景:
在手机端上传图片的时候,由于手机拍摄角度的问题导致图片的方向属性是不一样的,虽然在手机里面查看是没有问题的,但是一旦使用web预览就会使用该图片最原始的方向,如果是行下的他就会倒立
解决方案:
面对这个问题我也是百度了一下,看到这demo:http://www.imqing.com/demo/rotateImg.html
就是使用h5实现图片的选择,但是这个原始版本没有考虑到图片的显示区域大小可能小于图片的本身大小,所以如果直接使用的话,会出现图片显示不全的bug,我这里做了一些改动,然后将完整的代码分享出来,
注意:这里只有前端没有后端处理,其实前端只要把生成的base64传给后端处理就可以了
项目运行截图如下:
旋转之后的图片:
猜你喜欢
请下载代码后再发表评论
文件名:dev.zip,文件大小:15.92K
下载
- /
- /dev
- /dev/css
- /dev/css/common
- /dev/css/common/mobile-reset.css
- /dev/css/invoiceUpload.css
- /dev/css/common
- /dev/html
- /dev/html/invoiceUpload.html
- /dev/image
- /dev/image/invoiceSelect.png
- /dev/js
- /dev/css
- /dev
![最代码相关代码源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
![最代码最近下载分享源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
511076827 LV33
2022年4月10日
XcHyxa LV7
2021年5月18日
方正辉 LV2
2020年4月19日
2574995172 LV10
2020年2月10日
hehaogy LV1
2019年7月5日
ansenlee LV1
2017年8月12日
tengbei LV1
2016年1月18日
twingo0204 LV24
2016年1月15日
davispotter LV11
2015年1月14日
最代码官方 LV167
2014年12月30日
![最代码最近浏览分享源代码列表](https://static.zuidaima.com/resource/img/cattle_ico.png)
微信网友_6912871225888768 LV1
3月18日
tdfgjbi0de LV6
2023年10月7日
isen-fly
2023年9月15日
暂无贡献等级
金蓝色阳光 LV2
2023年6月19日
uni-code_0123 LV1
2023年5月31日
maoxp-1 LV2
2023年3月29日
superding LV5
2023年3月13日
第一只猫
2022年12月2日
暂无贡献等级
chensheng11 LV2
2022年11月8日
蛋白质 LV1
2022年10月29日