精华内容
下载资源
问答
  • 上级交代了一个任务,需要软件调用手机相机拍照缩放功能,方便用户自行搭配图片。 第一个问题:如何获取手机的摄像头所拍摄的画面。 unity中有一个类,WebCamTexture,继承自Texture类。访问它的静态成员devices,...

    上级交代了一个任务,需要软件调用手机相机拍照缩放功能,方便用户自行搭配图片。
    第一个问题:如何获取手机的摄像头所拍摄的画面。
    unity中有一个类,WebCamTexture,继承自Texture类。访问它的静态成员devices,即可获得所有摄像头。
    后置摄像头一般是第一个(?不确定,网上看了好几个案例都是调用第一个)。
    然后获取相机的贴图,将其传输到Canvas下的rawImage中。

        public string deviceName;
        public WebCamTexture webCam;
        public RawImage rawImage;
        void Start()
        {
            StartCoroutine(Call());
        }
    
        public IEnumerator Call()
        {
            // 请求权限
            yield return Application.RequestUserAuthorization(UserAuthorization.WebCam);
    
    
            if (Application.HasUserAuthorization(UserAuthorization.WebCam))
            {
                // 获取相机设备
                WebCamDevice[] devices = WebCamTexture.devices;
    
                // 取第一个相机名称
                deviceName = devices[0].name;
    
                // 创建相机贴图
                webCam = new WebCamTexture(deviceName, Screen.width, Screen.height, 60);
    
                // 
                rawImage.texture = webCam;
    
                // 相机开启
                webCam.Play();
            }
        }
    

    此时可以完成初步要求,但是有一个问题,发现相机旋转的时候,图片里的内容在不是横平竖直的情况下,有扭曲的情况出在这里插入图片描述现。
    在这里插入图片描述
    这是因为图片适配性没有做好。
    在这里插入图片描述
    rawImage是铺满整个屏幕,但是当手机斜向拍摄时,Screen的宽和高和屏幕的宽高就不是完全一样,传输到rawImage的图片可能出现拉伸的情况,造成图片不适配,为了解决这个方法,可以给rawImage添加一个组件——Aspect Ratio Fitter。Aspect Mode选择 Envelpoe Parent ,Aspect Ration为Screen.width/Screen.height。
    补充相关代码

    public AspectRatioFitter fit;
    fit.aspectRatio = (float)webCam.width / (float)webCam.height; 
    

    这个组件的功能是适配宽高比,选择图片中较小的宽或者高,然后放大平铺Canvas,多余的部分不显示。在这里插入图片描述
    当图片竖着的时候这个效果。
    在这里插入图片描述
    当图片宽比较大时是这个效果
    在这里插入图片描述
    在这里插入图片描述
    至此,我们解决了获得摄像机画面问题。接下来解决放大缩小问题。
    放大一般采用双指缩放,记录两次触摸之间点的距离差,然后等比例放大即可。

        private float _minValue = 1;
        private float _maxValue = 5;
        private float _speed = 1;
        private float _defaultSpeed = 800;
        private float _lastDistance;
        private float _twoTouchDistance;
        private Vector3 _firstTouch;
        private Vector3 _secondTouch;
            private void Update()
        {
            if (Input.touchCount <= 1)
            {
                return;
            }
            _firstTouch = Input.touches[0].position;
            _secondTouch = Input.touches[1].position;
            _twoTouchDistance = Vector2.Distance(_firstTouch, _secondTouch);
            if (Input.GetTouch(1).phase == TouchPhase.Began)
            {
                _lastDistance = _twoTouchDistance;
            }
            var scale = Mathf.Clamp(rawImage.GetComponent<RectTransform>().localScale.x + (_twoTouchDistance - _lastDistance) / _defaultSpeed * _speed, _minValue, _maxValue);
            rawImage.GetComponent<RectTransform>().localScale = new Vector3(scale, scale, scale);
            _lastDistance = _twoTouchDistance;
        }
    

    这里用的方法比较简单粗暴,直接放大rawImage,手机像素不好的话放大可能导致图片模糊情况的出现。解决方法是调用安卓原生态的摄像头,或者使用NatCam插件(百度到的,收费,没用过不确定),至于后俩种方法有时间再做。
    总结一下遇到的问题与解决方法。
    1、如何获取手机拍照的功能?
    调用WebCamTexture类与相关的参数、功能。
    2、手机旋转时候,如何解决rawImage不适配的问题。
    添加Aspect Ratio Fitter组件。
    3、手机旋转到一定角度视角会跟着动怎么办?
    在playSetting里修改 Default Orientation在这里插入图片描述
    选择自己需要的模式。

    展开全文
  • 如果图片本身没有设置 width、height属性的话,只需要修改  max-width:100%; 就可以了 如果图片本身设置了 width、height属性的话,需要同时修改width 和height 两种属性, 我的解决办法如下 <style> ...

    如果图片本身没有设置 width、height属性的话,只需要修改

      max-width:100%;

    就可以了

     

    如果图片本身设置了 width、height属性的话,需要同时修改width 和height 两种属性,

    我的解决办法如下

    <style>
      img {
        max-width: 100% !important;
        height: auto !important;
      }
    </style>

    转载于:https://www.cnblogs.com/acm-bingzi/p/imgZoom.html

    展开全文
  • 一个比较简单的办法是 点击图片 弹窗单独显示图片 然后让网页可缩放(修改meta(viewport)content信息,但是记录修改前的content,以便恢复正常窗口时恢复设置)。这样利用原生的浏览器功能即可实现图片缩放。只要修改...

    一个比较简单的办法是 点击图片 弹窗单独显示图片 然后让网页可缩放(修改meta(viewport)content信息,但是记录修改前的content,以便恢复正常窗口时恢复设置)。这样利用原生的浏览器功能即可实现图片缩放。

    只要修改meta中content属性里的user-scalable设置为1就可以缩放了。

    // 弹窗时记录meta信息

    recordMeta () {

    let meta = document.querySelector('meta[name="viewport"]')

    let metaInfo = {}

    let content = meta.getAttribute('content')

    let contentList = content.split(',')

    contentList.forEach(item => {

    let [key, value] = item.split('=')

    metaInfo[key] = value

    })

    this.metaInfo = { ...metaInfo }

    metaInfo['user-scalable'] = 1

    this.setMeta(metaInfo)

    },

    // 弹窗关闭时恢复meta信息

    recoveryMeta () {

    if (this.metaInfo) {

    this.setMeta(this.metaInfo)

    this.metaInfo = null

    }

    },

    setMeta (metaInfo) {

    let contentList = []

    for (let key in metaInfo) {

    contentList.push(`${key}=${metaInfo[key]}`)

    }

    let content = contentList.join(',')

    let meta = document.querySelector('meta[name="viewport"]')

    meta.setAttribute('content', content)

    },

    展开全文
  • CSS如何图片自动缩放

    千次阅读 2015-01-09 10:44:50
    由于手机开发需要面对各种不同分辨率的屏幕,所以,往往需要让图片能够自动调整高度或者宽度。 如果你的图片的横向宽度是根据父对象自动匹配的,那么往往希望图片的高度能自动成比例的缩放,否则图片会变形。...

    由于手机开发需要面对各种不同分辨率的屏幕,所以,往往需要让图片能够自动调整高度或者宽度。


    如果你的图片的横向宽度是根据父对象自动匹配的,那么往往希望图片的高度能自动成比例的缩放,否则图片会变形。可以按照如下设置CSS:

    .img{width : 100%;height : auto}

    如果你的图片的高度是根据父对象自动匹配的,那么希望图片的宽度能自动成比例的缩放,可以按如下设置CSS:

    .img{width : auto;height : 100%}

    展开全文
  • 很多朋友都可能遇到这这个问题,实现一个支持手势缩放图片轮播功能。就像我们的手机相册一样。而且有时候还需要让图片拉伸自动充满全屏。 图片轮播我们自然而然,想到了viewPager+imageView来实现,但是想要实现...
  • 因此如题所示,来看看在Android中图片如何缩放和旋转。Matrix是在Android中用于操作图像的类,以下我们通过例子来看看Matrix中用于实现图片缩放和旋转的两个方法使用。1、首先加载要操作的图片Bitma...
  • 用手指缩放图片。其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api。wx.previewImage,就是它。预览图片。除了不能预览开发环境的...
  • 3.背景的适配(图片缩放)     //背景缩放   public static final float scalX = view . screenW ; //屏宽   public static final float scalY = view . screenH ; //屏高   ...
  • 用手指缩放图片。其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api。wx.previewImage,就是它。预览图片。除了不能预览开发环境的...
  • 最近公司在开发一款手机网页,其他各方面都已经做完了,最后对方要求能实现网页里面的图片点击可以放大到全屏,可以手势缩放,可是本人还从没有做过这样的实例,竟也无从着手,还望各位大神能指点指点
  • 公司开发微信小程序,pm想实现如下需求:用手指缩放图片。其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api。wx.previewImage,就是...
  • 还不是手机屏幕太多分辨率了?你指定了宽度还怎么缩放?你妹的。 经过我的多次实验,发现一个比较好的方法, 在ios微信/浏览器和android微信/浏览器都可以完美显示,那就是: 1、div不做要求,内容居中就好了 2、...
  • 还不是手机屏幕太多分辨率了?你指定了宽度还怎么缩放?你妹的。经过我的多次实验,发现一个比较好的方法, 在ios微信/浏览器和android微信/浏览器都可以完美显示,那就是:1、p不做要求,内容居中就好了2、放一个...
  • Android通过手势实现手机屏幕的缩放操作,包括网页上的文字和图片缩放操作,此为源码实例,演示Android如何通过手势来控制页面的大小缩放操作,本代码主要利用现有的API实现HERO浏览图片和网页的缩放功能。...
  • 1. 图片缩放后对齐的问题 在Android的开发中,如何使用图片对很多开发人员是一个很头痛的事。最常见的问题是在一台手机上调试好的UI,在不同dpi的手机上会变形。 Android提供了适配不同dpi的方案,每种dpi都...
  • 后台取到的图片宽高格式不定,前台显示时要显示为一致的大小,即显示时宽高一致,在手机端和电脑端不能使图片拉伸变形。 在做响应式时使用了bootstrap的响应式布局栅格,因此宽度一致很好解决,但是高度如何做成...
  • 图片处理在程序开发中也是经常用到的,...因此如题所示,来看看在Android中图片如何缩放和旋转。 Matrix是在Android中用于操作图像的类,以下我们通过例子来看看Matrix中用于实现图片缩放和旋转的两个方法使用。 ...
  • Android多点触控实现图片缩放预览

    千次阅读 2017-09-08 21:33:31
    在我的博客 Android手势识别基础介绍 中介绍了 MotionEvent 的一些知识,看过的朋友或者对手势识别有了解的都应该...相信大家都经常在手机上浏览图片,大家的应用上也一定可以对图片进行放大或者缩小的处理,来让用户更
  • 大家在手机流量页面的...今天我们就给大家简单演示一下,如何使用小程序画布组件绘制自动缩放正方形1.页面显示正方形图片。2.正方形逐渐放大。动态效果图如下: 首页源码如下: <view class="copyright"> ...
  • Android应用开发之图片拖拉和多点触摸缩放

    千次阅读 多人点赞 2013-06-03 02:01:22
     今天我们学习如何实现图片(理论上选取的图片实际尺寸应大于当前手机的屏幕尺寸)拖拉和多点触摸缩放功能。其中多点触摸缩放功能模拟器上不支持,需要在真机下测试。下面给出该场景的案例: 一、案例技术要点 1....
  • 大家在WP7 中 展现图片是我想肯定很纠结于如何实现 类似 手机照片查看是 照片能自由缩放 拖动的功能。 在这里我就借 toolkit 的花 给大家share一个小技巧  在 sl toolkit for wp 中 有个东西叫做 gest
  • 最近两天有个...就是我们拍照的时候,因为横着或者竖着拿相机或者手机拍摄的图片,最终显示出来的时候要是拍摄时候的样子,比如: “我霉”orz 我就当您是用过lufylegend的道友了。那么我们知道Bitma...
  • 通过bitmap的option属性 获取所要加载图片的长和宽 然后根据手机屏幕大小或者自定义大小和图片大小 获取缩放比例。 完成缩放之后,通过bitmap.compress压缩图片的质量输出
  • 接下来我们就展示一下如何使用一张图来适配市面上的绝大部分手机:对图片缩放裁剪等处理。为了适配不同尺寸的设备,首先我们需要对图片进行等比缩放: 我们需要先行计算将要放大的图片的高度

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 192
精华内容 76
关键字:

手机如何缩放图片