移动端怎么利用html5对照片处理-创新互联

本文将为大家详细介绍“移动端怎么利用html5对照片处理”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“移动端怎么利用html5对照片处理”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

创新互联建站主营峡江网站建设的网络公司,主营网站建设方案,手机APP定制开发,峡江h5重庆小程序开发搭建,峡江网站营销推广欢迎峡江等地区企业咨询html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

各种坑汇总
  • 调取手机相册
    iOS到没什么问题,安卓手机好坑啊,网上搜了很多办法,要么就是有的手机不管用,要么就是只能调相册不能调相机,要么就是只能调相机不能调相册

  • 调取相册拿到相片后渲染到界面上,iOS又出了问题,通过相机拍摄的图片是旋转过90度的,或者苹果里面正常的图片到了安卓机展示是旋转90的,也有的图片苹果上正常在后台是歪的。身为一个iOS开发出身的我这就不理解了,经过几番查证,得出一个结论,苹果的相机是歪的!

  • 图片渲染过后浏览器会崩溃,尤其是在微信,不得不说,微信好坑啊,什么东西到微信上就会出现各种问题!

  • 然后是图片上传的问题,一开始采用了文件上传的形式,后来结果测试反馈,很多安卓机不能上传成功!说多了都是泪,不多说进正题!

调取手机相册和相机

采用h6调取相册 虽然是一句话从网页调取,但是如果想相册,相机都调的话 要这么写 (我真的是查了好久)


   
图片渲染

图片渲染我采用了canvas ,利用了一个叫 exif.js的插件获取一下手机拍摄的方向(也就是拍照时是竖着拿手机还是横着,),然后判断下设备,对iOS设备的三个方向对图片进行旋转,利用canvas画到画布上

btnUploadFile(e){
      //获取图片
      var  self = this;
      var filechooser = document.getElementById('filechooser');
      var previewer = document.getElementById('previewer');
      var that = e.target;
      var files = that.files;
      var file = files[0];
      //判断拍摄方向,
       EXIF.getData(file,function(){
            self.orientation=EXIF.getTag(this,'Orientation');
       });
      self.fileData = file;
       // 接受 jpeg, jpg, png 类型的图片
       if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
             return;
      }
      var reader = new FileReader();
     reader.onload = function() {
          var result = this.result;
          var img =  new Image();
         //进行图片的渲染
           img.onload = function() {
                //图片旋转压缩处理后的base64
                var compressedDataUrl =self.compress(img,self.fileData.type);
               //渲染到img标签上
                self.toPreviewer(compressedDataUrl);
               img = null;
           };
         img.src = result;
      };
      reader.readAsDataURL(self.fileData);
},
图片渲染

图片渲染时不但要把图片旋转,还要进行压缩,由于现在相机像素太高,高清图片会导致浏览器崩溃,当然如果是做的微信开发,只需要在微信浏览器中适配,那么可以参考微信jssdk中的调用相册的方法,这样就不会有图歪和崩溃的问题了。当然如果不是只做微信,我们还是要进行压缩,同样是采用canvas
(mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html )

//对图片进行旋转,压缩的方法,最终返回base64  渲染给img标签的src
compress(img, fileType) {
      var degree=0,drawWidth,drawHeight,width,height;
      drawWidth=img.width;
      drawHeight=img.height;
      //以下改变一下图片大小
     var maxSide = Math.max(drawWidth, drawHeight);
     if (maxSide > 1024) {
           var minSide = Math.min(drawWidth, drawHeight);
            minSide = minSide / maxSide * 1024;
            maxSide = 1024;
           if (drawWidth > drawHeight) {
                drawWidth = maxSide;
                drawHeight = minSide;
            } else {
                drawWidth = minSide;
                drawHeight = maxSide;
            }
    }
    var canvas=document.createElement('canvas');
    canvas.width=width=drawWidth;
    canvas.height=height=drawHeight;
    var context=canvas.getContext('2d');
    //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
    if($.device.ios){
         switch(this.orientation){
              //iphone横屏拍摄,此时home键在左侧
             case 3:
                   degree=180;
                   drawWidth=-width;
                   drawHeight=-height;
                    break;
          //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
              case 6:
                    canvas.width=height;
                    canvas.height=width;
                    degree=90;
                    drawWidth=width;
                    drawHeight=-height;
                    break;
              //iphone竖屏拍摄,此时home键在上方
               case 8:
                      canvas.width=height;
                       canvas.height=width;
                       degree=270;
                       drawWidth=-width;
                       drawHeight=height;
                       break;
          }
     }
     //使用canvas旋转校正
     context.rotate(degree*Math.PI/180);
     context.drawImage(img,0,0,drawWidth,drawHeight);
     // 压缩0.5就是压缩百分之50
     var base64data = canvas.toDataURL(fileType, 0.5);
     canvas = context = null;
     this.urlbase = base64data;
      return base64data;
},

最终拿到base64渲染给img标签的src

toPreviewer(dataUrl) {
       previewer.src = dataUrl;
 },
图片上传

上面拿到了base64  后台提供一个base64上传图片的接口,base64有个好处是我们获取到的base64  是进行旋转压缩后图片的base64,这样我们上传服务器,或从别的地方展示这个图片都是旋转压缩后的,如果其他页面要展示这张图片,就省去了旋转压缩的过程!其实我现在也不知道为什么通过传文件方式传图片有的安卓机不行,不过改base64上传方式成功后就业没在纠结。

如果你能读到这里,小编希望你对“移动端怎么利用html5对照片处理”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注创新互联网站制作公司行业资讯频道!


本文标题:移动端怎么利用html5对照片处理-创新互联
本文URL:http://csdahua.cn/article/hoojo.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流