移动端网页上传图片功能简析(主要应用场景为微信公众号)

Posted 依米艳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端网页上传图片功能简析(主要应用场景为微信公众号)相关的知识,希望对你有一定的参考价值。

功能简介:

在微信公众号中,要开发一个照片上传功能,可以拍照,可以选择相册图片,可以预览。

开发思路:

用户点击上传按钮--》拍照或者选择图片--》调用上传接口--》后来程序处理(生成缩略图,旋转图片)上传至fastdfs服务器--》返回上传图片的缩略图地址和原图片地址显示在已上传图片区域。

用户对于已上传的图片可以删除.如删除,对应fastdfs中的原始图片和缩率图一并删除。

参考文章:

http://blog.csdn.net/linlzk/article/details/48652635

遇到的问题:

1,上传图片

采用表单方式上传

		               <form class="uploadForm" enctype="multipart/form-data">
		            	<input class="health-assay-info-id" name="healthAssayInfoId" type="hidden"><!--此处处理业务问题的id,上传图片后,对应的相关业务数据的id-->
		                <label class="btn-file">
		                	<input type="file" accept="image/*"  name="pics" capture="camera" onchange="form_pics.addImg(this);">
		                    <img src="../images/upimg.png" >
		                </label>
		               </form>

 代码中的红色部分很重要。如果没有此限制,部分安卓机型上无法选择照相机。

2,ios手机拍照,横拍和竖拍旋转问题

使用引入exif.js。获取当前 照相机拍摄的照片的旋转度数。

ps:此处下载 http://code.ciaoca.com/javascript/exif-js/ 

EXIF.getData(document.getElementById(‘imgElement‘), function(){
  var Orientation  = EXIF.getTag(this, ‘Orientation‘);
//ajaxSubmit上传处理代码,把 Orientation作为参数,传到后台。
});

 后台处理:

            if (picOrientation != null && picOrientation > 1) {
                int degree = 0;
                switch (picOrientation) {
                    case 6:
                        degree = 90;
                        break;
                    case 8:
                        degree = 270;
                        break;
                    case 3:
                        degree = 180;
                        break;
                    default:
                        degree = 0;
                        break;
                }
            }

 旋转图片代码(旋转要重新计算图片的宽高。http://www.oschina.net/code/snippet_818200_45972)

    public static BufferedImage rotateImage(final BufferedImage bufferedImage, final int angle) {
        
        int width = bufferedImage.getWidth();
        int height = bufferedImage.getHeight();
        int new_w = 0, new_h = 0;
        int new_radian = angle;
        if (angle <= 90) {
            new_w = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
        }
        else if (angle <= 180) {
            new_radian = angle - 90;
            new_w = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
        }
        else if (angle <= 270) {
            new_radian = angle - 180;
            new_w = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
        }
        else {
            new_radian = angle - 270;
            new_w = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
        }
        BufferedImage toStore = new BufferedImage(new_w, new_h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = toStore.createGraphics();
        AffineTransform affineTransform = new AffineTransform();
        affineTransform.rotate(Math.toRadians(angle), width / 2, height / 2);
        if (angle != 180) {
            AffineTransform translationTransform = findTranslation(affineTransform, bufferedImage, angle);
            affineTransform.preConcatenate(translationTransform);
        }
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, new_w, new_h);
        g.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        g.drawRenderedImage(bufferedImage, affineTransform);
        g.dispose();
        return toStore;
    }

  3.使用

EXIF.getData获取获取拍摄方向时,感觉此方式是异步的
如果这样写
var Orientation = null;
EXIF.getData(document.getElementById(‘imgElement‘), function(){
    Orientation = EXIF.getTag(this, ‘Orientation‘);
  
});

//ajaxSubmit上传处理代码,把 Orientation作为参数,传到后台。

 就会先去执行上传,然后才执行

EXIF.getData的回调函数获取到Orientation 。还没有想到有什么好的解决方案,索性把上传代码逻辑写到了EXIF.getData的回调函数里面。
4,展示大图
展示大图时需要计算手机屏幕的分辨率。我的策略如下
         var windowW = $(window).width();
         var windowH = $(window).height();
         var realWidth = this.width;
         var realHeight = this.height;
         var imgWidth, imgHeight;
         var scale = 0.8;
         
         if(realHeight>windowH*scale && realWidth>windowW) {
        	 imgWidth = windowW;
        	 imgHeight = imgWidth/realWidth*realHeight;
         } else if(realHeight>windowH*scale){
        	 imgHeight = windowH*scale;
             imgWidth = imgHeight/realHeight*realWidth;
         } else if(realWidth>windowW){
        	 imgWidth = windowW;
        	 imgHeight = imgWidth/realWidth*realHeight;
         } else {
             imgWidth = realWidth;
             imgHeight = realHeight;
         }
         $("#bigimg").css("width",imgWidth);

  如果实际宽度>屏幕宽度,保证宽是沾满屏幕,调整高度

  

以上是关于移动端网页上传图片功能简析(主要应用场景为微信公众号)的主要内容,如果未能解决你的问题,请参考以下文章

微信公众号开发 (微信网页开发)

微信小程序图片上传时提示:没有应用可执行此操作

微信公众号实现手机授权网页登录功能

快速创建VUE移动端上传图片功能

微信公众平台里的服务器配置设置是干啥用的

微信企业号 JS-SDK:上传图片