xxw1028的gravatar头像
xxw10282014-12-30 19:28:41

html5实现图片旋转源代码下载

业务背景:

    在手机端上传图片的时候,由于手机拍摄角度的问题导致图片的方向属性是不一样的,虽然在手机里面查看是没有问题的,但是一旦使用web预览就会使用该图片最原始的方向,如果是行下的他就会倒立

解决方案: 

   面对这个问题我也是百度了一下,看到这demo:http://www.imqing.com/demo/rotateImg.html

   就是使用h5实现图片的选择,但是这个原始版本没有考虑到图片的显示区域大小可能小于图片的本身大小,所以如果直接使用的话,会出现图片显示不全的bug,我这里做了一些改动,然后将完整的代码分享出来,

注意:这里只有前端没有后端处理,其实前端只要把生成的base64传给后端处理就可以了

项目运行截图如下:

       html5实现图片旋转源代码下载选择图片之后的jietu截图:

    html5实现图片旋转源代码下载

旋转之后的图片:

html5实现图片旋转源代码下载


打赏

文件名:dev.zip,文件大小:15.92K下载
  • /
      • /dev
          • /dev/css
              • /dev/css/common
                • /dev/css/common/mobile-reset.css
            • /dev/css/invoiceUpload.css
          • /dev/html
            • /dev/html/invoiceUpload.html
          • /dev/image
            • /dev/image/invoiceSelect.png
          • /dev/js
    最代码最近下载分享源代码列表最近下载
    XcHyxa LV75月18日
    月亮星星星星星星
    方正辉 LV22020年4月19日
    星星星星
    2574995172 LV102020年2月10日
    月亮月亮星星星星
    hehaogy LV12019年7月5日
    星星
    ansenlee LV12017年8月12日
    星星
    tengbei LV12016年1月18日
    星星
    twingo0204 LV242016年1月15日
    太阳月亮月亮
    davispotter LV112015年1月14日
    月亮月亮星星星星星星
    最代码官方 LV1612014年12月30日
    皇冠皇冠太阳太阳星星
    最代码最近浏览分享源代码列表最近浏览
    ikewussttt LV19月16日
    星星
    00x12300 LV186月4日
    太阳星星星星
    XcHyxa LV75月18日
    月亮星星星星星星
    18758050197 LV15月16日
    星星
    廖业贵 LV125月9日
    月亮月亮月亮
    七七琦琦4月28日
    暂无贡献等级
    王梓豪 LV34月14日
    星星星星星星
    yinghuai4月11日
    暂无贡献等级
    青楼居士 LV23月12日
    星星星星
    JaJaJamBo LV92月13日
    月亮月亮星星
    顶部客服微信二维码底部
    >扫描二维码关注最代码为好友扫描二维码关注最代码为好友