精华内容
下载资源
问答
  • 完成功能后放到手机上发现在点击输入框的时候,系统会自动放大界面。输入结束后又缩小回去。 这个设计倒是蛮贴心的,但是实现的有些问题,在缩小的时候跟我原本状态的大小不一样。而且整个变化的过程也很不流畅,...

    今天用bootstrap谢了个预约的功能,需要从跳出一个模态框,输入用户信息。

    完成功能后放到手机上发现在点击输入框的时候,系统会自动放大界面。输入结束后又缩小回去。

    这个设计倒是蛮贴心的,但是实现的有些问题,在缩小的时候跟我原本状态的大小不一样。而且整个变化的过程也很不流畅,用户体验很不好。

    最难以忍受的是在使用select控件进行选择操作时,整个界面极度扭曲。操作完界面大小完全跟原来不一样,导致用户必须手动缩小屏幕才能继续操作。

    在网上搜了一下,只看到一篇文章提出了这个问题,还没有人解答。(估计我搜的关键字不在点子上)

    后来我想,只要关闭屏幕手动放大缩小的功能,这个问题就应该能解决了。

    于是在index里加了相应的代码:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    果然问题完美解决。

    次日更新:

    今天仔细查看bootsrap官方文档发现,人家在显著位置就提示了,移动设备优先的话要加入这段代码,只不过之前看文档的时候只关注功能如何实现,对这些细节的问题毫不在意,所以之前看文档直接忽视这条信息,知道自己遇到了类似的问题,才关注相关的信息。自己给自己挖坑啊。

    所以今后看文档一定要仔细,耐心。切记,切记。

     

    转载于:https://www.cnblogs.com/guolaomao/p/6543248.html

    展开全文
  • 前言 目前市面上App携带的扫一扫功能大多是乞丐版,怎么说,就是只有扫一扫....但是我觉得支付宝的弱光做的一般,自动放大也有点鸡肋,不过也很不错了,毕竟一般来说,实现扫一扫乞丐版就基本完事了,而我...

    原文地址

    前言


     目前市面上App携带的扫一扫功能大多是乞丐版,怎么说,就是只有扫一扫.而目前来说扫一扫做的最好的还是微信,微信有弱光环境的检测(可以自动提示用户打开闪光灯),同时,当发现扫描目标距离过远时,还可以自动的放大镜头,亲测可以多次的放大,所以说细节决定成败,支付宝虽然也有微信的功能,但是我觉得支付宝的弱光做的一般,自动放大也有点鸡肋,不过也很不错了,毕竟一般来说,实现扫一扫乞丐版就基本完事了,而我也遇到了这个需求,就是要实现微信和支付宝类似的效果.


    效果图走一波(用的gif大师,录制的质量比较低,质量过高的传不上去,见谅)


    第一帧当为弱光时,动态显示“打开手电筒”,点击打开后,则一直显示“关闭手电筒”.

    第二帧就是扫一扫自动放大的效果.

     



    需求分析


    1.中间的frame框就不说了,比较的简单,ondraw里边修改,用安卓纯纯的坐标系,就可以实现.
    2.弱光检测: 这块我花了两天的时间研究,ios获取后置摄像头的光感比较的方便,几行代码就可以获取,他们的是brightnessvalue这个值;而安卓第一版我用的光传感器,你要知道,光传感器是在前置摄像头附近,而扫一扫是用后置摄像头来扫描的,光传感器晚上是没有问题的,白天不是非常的精确,就放弃了这个方案,最后查了相关的资料我使用jpegReader.metadata(),exifinterface来读取实时帧流,均以失败告终,我想Camera2应该提供了某些的api,但是要求是5.0之后了,我也就没有细研究,之后,我看到支付宝的效果后,我就明白了,他分析的是后摄像头拍照的图片颜色来区分的,多次尝试发现,是这样,同理,微信应该也是类似的实现,只不过他调的比较细,优化的比较好而已.
    3.扫一扫自动放大:这个你思考下,其实也很简单,Camera有放大的属性,无非是触发条件怎么来判断,微信扫一扫是当镜头中有二维码的是才会进行自动放大,并且会多次的放大.


    代码实现


    我们项目用的是zxing,不用说了要修改源码.

    ui层就不说了,真的简单,安卓坐标系,cavas 画布api,来绘制rect区域,在ViewFindView这个类里边的onDraw方法修改即可.


    弱光检测


      上面分析完后,就知道了,咱们要实时的分析图片的颜色平均值(agb平均值),既然说到了实时的分析,我们就要找到二维码处理解码实时帧的方法,zxing使用decodeThread,decodeHanlder,decodeThread线程不断的分析流并解码.
    /**
         * Decode the data within the viewfinder rectangle, and time how long it took. For efficiency,
         * reuse the same reader objects from one decode to the next.
         *
         * @param data   The YUV preview frame.
         * @param width  The width of the preview frame.
         * @param height The height of the preview frame.
         */
        private void decode(byte[] data, int width, int height) 
    

    这个data是YUV格式的,谷歌也提供了相关的转换方法Yuvimage.
    将YUV转换为agb方法
    private int[] decodeYUV420SP(byte[] yuv420sp, int width, int height) {
            final int frameSize = width * height;
     
            int rgb[] = new int[width * height];
            for (int j = 0, yp = 0; j < height; j++) {
                int uvp = frameSize + (j >> 1) * width, u = 0, v = 0;
                for (int i = 0; i < width; i++, yp++) {
                    int y = (0xff & ((int) yuv420sp[yp])) - 16;
                    if (y < 0) y = 0;
                    if ((i & 1) == 0) {
                        v = (0xff & yuv420sp[uvp++]) - 128;
                        u = (0xff & yuv420sp[uvp++]) - 128;
                    }
     
                    int y1192 = 1192 * y;
                    int r = (y1192 + 1634 * v);
                    int g = (y1192 - 833 * v - 400 * u);
                    int b = (y1192 + 2066 * u);
     
                    if (r < 0) r = 0;
                    else if (r > 262143) r = 262143;
                    if (g < 0) g = 0;
                    else if (g > 262143) g = 262143;
                    if (b < 0) b = 0;
                    else if (b > 262143) b = 262143;
     
                    rgb[yp] = 0xff000000 | ((r << 6) & 0xff0000) | ((g >> 2) &
                            0xff00) | ((b >> 10) & 0xff);
     
     
                }
            }
            return rgb;
        }
    


    使用Bitmap.createBitmap转换为bitmap图片下,分析图片颜色的平均值,颜色都是16进制的,黑色的颜色 对应int = -16777216, 所以我们认为当前的平均值 / black(-16777216) 的比值小于等于1 同时大于0.95,就认为是弱光(这个值还可以调节)
    1.    private int getAverageColor(Bitmap bitmap) {
              int redBucket = 0;
              int greenBucket = 0;
              int blueBucket = 0;
              int pixelCount = 0;
       
              for (int y = 0; y < bitmap.getHeight(); y++) {
                  for (int x = 0; x < bitmap.getWidth(); x++) {
                      int c = bitmap.getPixel(x, y);
       
                      pixelCount++;
                      redBucket += Color.red(c);
                      greenBucket += Color.green(c);
                      blueBucket += Color.blue(c);
                  }
              }
       
              int averageColor = Color.rgb(redBucket / pixelCount, greenBucket
                      / pixelCount, blueBucket / pixelCount);
              return averageColor;
          }
      


    我们分析的是矩形框内的图片,获取矩形框内图片的agb数组,将其转换为bitmap来分析其agb的平均值,分析完后直接释放当前帧bitmap(释放触发gc,会有内存抖动,效果上忽略不计)
    private void analysisBitmapColor(byte[] data, int width, int height) {
            int[] rgb = decodeYUV420SP(data, width, height);
            Bitmap bmp = null;
            if (null != frameRect) {
                //取矩形扫描框frameRect的2分之一创建为bitmap来分析
                bmp = Bitmap.createBitmap(rgb, frameRect.left + (frameRect.right - frameRect.left) / 4, frameRect.width() / 2, frameRect.width() / 2, frameRect.height() / 2, Bitmap.Config.ARGB_4444);
            }
            if (bmp != null) {
                float color = getAverageColor(bmp);
                DecimalFormat decimalFormat1 = new DecimalFormat("0.00");
                String percent = decimalFormat1.format(color / -16777216);
                float floatPercent = Float.parseFloat(percent);
                Log.e(TAG, " color= " + color + " floatPercent= " + floatPercent + " bmp width= " + bmp.getWidth() + " bmp height= " + bmp.getHeight());
                Constants.isWeakLight = (color == -16777216 || (floatPercent >= 0.95 && floatPercent <= 1.00));
                bmp.recycle();
            }
        }
    


    上述代码基本实现了弱光的检测,代码还可以进行优化,比如我在YUV转换为AGB时,我只转换矩形扫描框内的图片,只分析这块的图片AGB平均值,目前,这一帧的图片我全部转换了AGB,你会发现,color 永远不会等于-16777216(black),因为最优的做法就是只decode矩形扫描框内的图片将其转换为agb数组,然后再进行图片的agb分析,这样也仅仅有可能color会等于-16777216.


    扫一扫自动放大的功能



    二维码携带有坐标数据,根据坐标算出二维码的矩形大小并和当前frame边框的坐标进行比对,来进行放大,目前看微信好像也是这样实现的,不过弊端是什么,目前我是扫描出来这个界面结果后进行放大的,有点多此一举的感觉,
    而微信我测试后,也是扫描后进行多次放大,我不知道他们为什么要这样做,已经decode到数据了,为什么还要放大?难道仅仅是为了体验,但是我感觉这样的体验很一般,但是他们微信用的自己的qbar,我反编译后 发现他们使用了自己的"libwechatQrmod.so"这个库,这里面肯定封装了扫描二维码的识别算法,目前这个算法,我还没有破解.目前来说我也只能先这样,后续可以根据扫描时间来优化进行放大或修改吧.自动放大代码如下:
    if (rawResult != null) {
                // Don't log the barcode contents for security.
                long end = System.currentTimeMillis();
                Log.d(TAG, "Found barcode in " + (end - start) + " ms");
                if (handler != null) {
                    float point1X = rawResult.getResultPoints()[0].getX();
                    float point1Y = rawResult.getResultPoints()[0].getY();
                    float point2X = rawResult.getResultPoints()[1].getX();
                    float point2Y = rawResult.getResultPoints()[1].getY();
                    int len = (int) Math.sqrt(Math.abs(point1X - point2X) * Math.abs(point1X - point2X) + Math.abs(point1Y - point2Y) * Math.abs(point1Y - point2Y));
                    if (frameRect != null) {
                        int frameWidth = frameRect.right - frameRect.left;
                        Camera camera = activity.getCameraManager().getCameraNotStatic();
                        Camera.Parameters parameters = camera.getParameters();
                        final int maxZoom = parameters.getMaxZoom();
                        int zoom = parameters.getZoom();
                        if (parameters.isZoomSupported()) {
                            if (len <= frameWidth / 4) {
                                if (zoom == 0) {
                                    zoom = maxZoom / 3;
                                } else {
                                    zoom = zoom + 10;
                                }
                                if (zoom > maxZoom) {
                                    zoom = maxZoom;
                                }
                                parameters.setZoom(zoom);
                                camera.setParameters(parameters);
                                final Result finalRawResult = rawResult;
                                postDelayed(new Runnable() {
                                    @Override
                                    public void run() {
                                        Message message = Message.obtain(handler, R.id.decode_succeeded, finalRawResult);
                                        Bundle bundle = new Bundle();
                                        bundle.putParcelable(DecodeThread.BARCODE_BITMAP, source.renderCroppedGreyscaleBitmap());
                                        message.setData(bundle);
                                        message.sendToTarget();
                                    }
                                }, 1000);
     
                            } else {
                                Message message = Message.obtain(handler, R.id.decode_succeeded, rawResult);
                                Bundle bundle = new Bundle();
                                bundle.putParcelable(DecodeThread.BARCODE_BITMAP, source.renderCroppedGreyscaleBitmap());
                                message.setData(bundle);
                                message.sendToTarget();
                            }
                        }
                    } else {
                        Message message = Message.obtain(handler, R.id.decode_succeeded, rawResult);
                        Bundle bundle = new Bundle();
                        bundle.putParcelable(DecodeThread.BARCODE_BITMAP, source.renderCroppedGreyscaleBitmap());
                        message.setData(bundle);
                        message.sendToTarget();
                    }
                }
            } else {
                if (handler != null) {
                    Message message = Message.obtain(handler, R.id.decode_failed);
                    message.sendToTarget();
    //                if (!Constants.isWeakLight) {
    //                    long failedTimeStamp = System.currentTimeMillis();
    //                    if (failedTimeStamp - intervalTime > INTERVAL) {
    //                        isResetTime = true;
    //                        intervalTime = System.currentTimeMillis();
    //                        Camera camera = activity.getCameraManager().getCameraNotStatic();
    //                        Camera.Parameters parameters = camera.getParameters();
    //                        final int maxZoom = parameters.getMaxZoom();
    //                        int zoom = parameters.getZoom();
    //                        if (parameters.isZoomSupported()) {
    //                            if (zoom == 0) {
    //                                zoom = maxZoom / 2;
    //                            } else {
    //                                zoom = zoom + 10;
    //                            }
    //                            if (zoom > maxZoom) {
    //                                zoom = maxZoom;
    //                            }
    //                            parameters.setZoom(zoom);
    //                            camera.setParameters(parameters);
    //                        }
    //                    }
    //                }
                }
            }
    




    展开全文
  • 苹果手机点击输入框页面自动放大

    万次阅读 2017-10-18 15:34:00
    问题描述一个项目里用了bootstrap的日期插件bootstrap-datetimepicker,在显示日期的那个input输入框被点击时在苹果手机上页面会被放大,该input输入框type等于text。后来发现忘记加了一些东西。解决办法一开始我的...

    问题描述

    一个项目里用了bootstrap的日期插件bootstrap-datetimepicker,在显示日期的那个input输入框被点击时在苹果手机上页面会被放大,该input输入框type等于text。后来发现忘记加了一些东西。

    解决办法

    一开始我的meta标签是这样的

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    后来改成了这样

    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    总结

    苹果手机好像有点击输入框自动放大的功能,认为这样用户体验好。我觉得起作用的地方,主要在于initial-scale=1,maximum-scale=1,使得缩放比例为1,这样在苹果手机上就不会自动放大了。

    展开全文
  • 在微信中调试,点击图片竟然放大,自己没写放大图片的方法,也没有调用wx.previewImage()方法,最后查找,原来是微信Android客户端已经在底层支持了img标签自动放大功能,说是bug还是改进?因为传统的浏览器是不带...

    自己使用的是微信Android客户端,使用img标签的src属性将图片设置好了以后,在微信中调试,点击图片竟然放大,自己没写放大图片的方法,也没有调用wx.previewImage()方法,最后查找,原来是微信Android客户端已经在底层支持了img标签自动放大的功能,说是bug还是改进?因为传统的浏览器是不带图片放大效果的,需要自己写方法,好了,明白了问题所在,解决就好了: 
    传统方式:

    $(document).on(‘click’, ‘img’, e => { e.preventDefault(); })

    这个方式可能会把所有的默认的属性都屏蔽了,典型的就是a标签不能跳转 
    css方式

    img{ pointer-events: none; }

     

    这个会让img标签的点击事件失效,如果想要点击图片就要给上面再写一层 
    Vue方式:

    v-on:click.prevent或者@click.prevent

     

    ------------------------------------------------------------------

     

    我自己用的是给对应的img图片加上增加div父元素再给imgpointer-events: none; 

    然后把原本在img上的事件放到父div中class也是,然后imgwidth:100%就好了

    针对个别发现的图片处理

     

    转载于:https://www.cnblogs.com/lichuntian/p/10954232.html

    展开全文
  • 苹果手机好像有点击输入框自动放大功能,认为这样用户体验好。我觉得起作用的地方,主要在于initial-scale=1,maximum-scale=1,使得缩放比例为1,这样在苹果手机上就不会自动放大了。 转载于:...
  • 为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小, ...安卓手机解决方案: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1....
  • 没写放大图片的方法,也没有调用wx.previewImage()方法,最后查找,原来是微信Android客户端已经在底层支持了img标签自动放大功能,说是bug还是改进?因为传统的浏览器是不带图片放大效果的,需要自己写方法,好了...
  • 由于客户要求,需要实现扫瞄二维码是实现自动拉近的效果,但是找了几个三方都没有这个效果,于是经过比较,最后修改对SGQRCode这个三方做了些修改,简单实现了这个功能,双击的时候会对焦拉进,效果如下。...
  • 谈谈自动瘦脸和自动眼睛放大算法

    万次阅读 2013-04-23 12:22:23
    目前,手机上各种图片特效的软件应用App盛行,... 不过,最具技术含量的还是虹软的perfect365,perfect365在其发行的第一个版本中就实现人脸五官的定位,并在此基础上实现了自动眼睛放大自动瘦脸等一些列涉及人脸
  • 现在微信Android客户端已经在底层支持了img标签自动放大功能,我们点击页面上的图片就会放大,但实际开发中我们这个功能可能会收到影响。下面有几种方式可以处理 传统方式: $(document).on(‘click’, ‘img’, e...
  • 今天接到了一个bug,客户的手机站在iPhone下选中搜索框时页面会自动变大,导致页面变形。客户希望我们能解决这个问题。 网上搜索了一下,大部分的答案是通过meta便签禁用页面缩放功能,代码如下: <meta name=...
  • 信号放大器从其名称我们就知道其功能放大信号。信号放大器的种类很多,比如电视信号放大器,收音机放大器等,所有的接收机里面都有信号放大器。专门放大手机信号的放大器叫手机信号放大器,主要用于解决室内手机...
  • 有时候页面显示的图片看不清,希望点击后放大查看,只是实现这样的一个功能比较...代码给出一个解决该问题的例子,实现鼠标移动到图片上时鼠标自动变为带加号的放大镜,点击后可以将图片放大成全屏显示,手机上也兼容。
  • 注:图片来自各产品介绍页面要看结论,跳至最后前两天买了个带音频线的“jrc迷你小音响“,让父母出去时插在手机耳机孔上,作为来电铃声放大器,这样他们就再也不会因为手机放在包里而总是漏接电话了。今天偶然找出...
  • 问一下网页端CSS样式在手机端显示的时候,放大缩小功能失效呢,这个问题有人遇到过吗 .top { height:43px; } 代码省略 代码省略
  • 在做webapp时候,遇到一个需要做双指放大功能,需求是:一张带有坐标的图片上有固定的点,需要点击这些坐标上的点进入相应的商品,并且需要对这一块进行双指可以缩放,双击缩放; 一开始是自己写监听touch事件...
  • vue项目中使用viewer实现放大功能时出现bug bug描述:用饿了么组件的dialog进行弹窗,弹窗中有图片需要实现点击放大功能,可在dialog中使用viewer,会导致方法的图片一会在弹窗前,一会在弹窗后,这样的话,会导致...
  • 本文给出一个解决该问题的例子,实现鼠标移动到图片上时鼠标自动变为带加号的放大镜,点击后可以将图片放大成全屏显示,手机上也兼容。 效果: image-zoom.js (function() { // 文档图片放大查看 imgZoom()...
  • 在使用mui的图片放大功能是,发现该功能只能把图片放大到占满整个屏幕,而且使用手机测试时,用两只手指继续放大图片时候,图片会自动往回缩,即图片无法再放大,经过研究,只要把mui.zoom.js的部分代码注释掉就可以...
  • 求解!如何不是手机的自带功能如何编写这个代码? 我写了一些放大功能的代码都达不到全屏的那种效果。。
  • 搭建一个统一识别二维码的控制器,获取到内容,就交给外围处理(比如请求接口,接口请求成功就关闭扫一扫界面,否则停留在扫一扫界面) .h + (instancetype)getViewController; /** 让外围处理识别事件 */ @...
  • html网页宽度自动适应手机屏幕宽度的方法
  • 今天要介绍的插件是具有丰富功能的移动端插件-iSlider。iSlider是一个表现出众,轻量且高性能,无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景,提供多种切换动画效果,展示多种类型的场景。 使用环境...
  • 网页自动适应手机

    千次阅读 2017-11-10 11:09:32
    判断是否为手机端 if (window.navigator.userAgent.toLowerCase().indexOf('mobile') == -1) {//-1 为PC端 1为移动端 } 贴出代码 复制过去吧 网站对移动设备友好,确保适当的绘制和触屏缩放: <meta name=...
  • 最近模仿“美团”,在应用中接入百度地图SDK(V3.2.0)时,需实现点击"+"放大,点击"-"缩小(如图): 百度了下,找到xiaanming的文章http://blog.csdn.net/xiaanming/article/details/11821523,但新版本MapView中已...
  • 自动手机又叫感应皂液器,自动皂液器。是一种用于卫生间或者洗手池旁的通过红外感应原理自动出皂液的机器。它采用先进的人体红外线感应技术,当人手伸到感应区中时它会自动给出相对应的皂液量,让人不需要接触或者...
  • 手机拍摄功能详解

    千次阅读 2016-09-29 15:34:15
    拍摄功能硬件一 Camera模组 大家都知道,手机背面的那个小小的孔,就叫摄像头。这个小孔幽幽的泛着光泽,深邃又迷人,如同一个含苞待放的小萝莉一样,这个小萝莉还是个傲娇娘,像零之使魔的614一样惹人怜爱,而且...
  • 网页现在自适应的一般就用 <meta name="viewport" content="width=...在苹果手机端 输入框 会变大不会变回去 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,013
精华内容 8,805
关键字:

如何关闭手机自动放大功能