小程序图片自适应组件 仿微信聊天图片

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量825 收藏 8
点赞数 1
分类专栏： 小程序 前端 文章标签： javascript vue.js 前端 小程序 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46146266/article/details/117668873
版权

（转载请注明出处，本文章内容仅用于学习）

这几天开发小程序有个新需求，需要在聊天群中实现发送图片。
之前做聊天时已经把框架搭好，心想应该只需要后端增加上传图片的一系操作。
当然最后做出来是没问题，但是不论用哪个小程序的图片自动缩放/截取，显示效果都差强人意，最后综合考虑（百度了一大圈都没有🙃），只能手写图片自适应算法

最终想要实现的效果

目前这种聊天群的图片显示，用户最习惯的还是微信跟QQ的显示模式，参考微信的图片最终样式大体上划分为缩放与截取。
一种是不管图片原来有多大，发送后都会缩放到正常比例显示给用户，另一种通常是图片的宽高比例相差极大，如果缩放到用户的能一眼看完的程度，通常很不美观，所以一般会截取多余长/宽的那一部分，只显示一部分，用户如果想看完整图片需点击查看。
最后要能对图片的样式进行控制跟原来的一样。

解决方案

简略：使用js获取图片宽高并使用算法得出合理的显示宽高，最后将宽高动态赋值给wxml的图片，截取则利用图片定义的视窗区域。
一张图片在聊天室发出后，怎么知道这张图片要不要缩放/裁剪？这里做法是相对于屏幕，定义一块图片最大能显示多少的视窗区域，如果图片宽高任意一边超出这个视窗区，就要进行缩放操作，至于怎么缩放以及缩放多少合适请看代码。

考虑使用场景在数据量很多的消息列表中，最终选择将整体代码样式封装进组件中使用，实测使用组件加载图片跟不使用加载基本无差别。

组件代码
这里是针对聊天场景调试优化的版本，下面有通用版，不会创建组件的搜别人贴子，这里不做演示直接贴代码

JS

Component({
  lifetimes:{
    detached: function() {
      //console.log("组件实例被从页面节点树移除");
    },
    attached: function(){
      //console.log("组件实例进入页面节点树");
      
      var that = this;
      wx.getImageInfo({ 
        src: that.properties.imgUrl,
        success: function (res) {  
          var imgWidth=res.width;
          var imgHeight=res.height;

          var maxPictureViewWidth = 280;//图片视窗最大宽度
          var maxPictureViewHeight = 220;//图片视窗最大高度

          var ratio = imgWidth/imgHeight;

          if(ratio<0.25 || ratio>2.2){//图片宽高比相差过大,可能需要截取
            //判断图片是过高还是过宽
            if(imgWidth>imgHeight){//图片过宽
              if(imgHeight>maxPictureViewHeight){//同时判断图片高度有没有大于视窗最大高度
                //图片过宽且图片高度大于视窗最大高度,依据高度缩减图片比例到视窗可见范围,宽度不管直接靠视窗截取多的部分不显示
                var product = maxPictureViewHeight/imgHeight;
                imgHeight=imgHeight*product
                imgWidth=imgWidth*product
                that.setData({
                  viewHeight:maxPictureViewHeight<imgHeight/2?maxPictureViewHeight:imgHeight/2,
                  viewWidth:maxPictureViewWidth<imgWidth/2?maxPictureViewWidth:imgWidth/2,
                  imgHeight:imgHeight/2,
                  imgWidth:imgWidth/2
                })
              }else{//图片高度小于视窗最大高度
                that.setData({
                  viewHeight:imgHeight/2,
                  viewWidth:maxPictureViewWidth,
                  imgHeight:imgHeight/2,
                  imgWidth:imgWidth/2
                })
              }
            }else{//图片过高
              if(imgWidth>maxPictureViewWidth){
                //图片过高且图片宽度大于视窗最大宽度,按照宽度缩减图片比例到视窗可见范围,高度不管直接靠视窗截取不显示
                var product = maxPictureViewWidth/imgWidth;
                imgHeight=imgHeight*product
                imgWidth=imgWidth*product
                that.setData({
                  viewHeight:maxPictureViewHeight,
                  viewWidth:maxPictureViewWidth,
                  imgHeight:imgHeight,
                  imgWidth:imgWidth
                })
              }else{//图片宽度小于视窗最大宽度
                that.setData({
                  viewHeight:maxPictureViewHeight,
                  viewWidth:imgWidth/2,
                  imgHeight:imgHeight/2,
                  imgWidth:imgWidth/2
                })
              }
            }
          }else{//图片宽高比相差不大，按照原图比例缩放显示
            //console.log("图片宽高比相差不大");
            if(imgWidth > imgHeight){//图片宽度多,图片可能是正方形,宽高比例为1,不过没关系进哪个判断都一样
              //console.log("图片宽度多")
              if(imgWidth>maxPictureViewWidth){//图片宽度比高度多且宽度大于视窗最大宽度，进行等比缩放
                console.log("图片宽度大于视窗最大宽度")
                var product = maxPictureViewWidth/imgWidth;
                
                imgWidth = imgWidth*product
                imgHeight = imgHeight*product;
                that.setData({
                  imgWidth:imgWidth/1.5,
                  imgHeight:imgHeight/1.5,
                  viewWidth:maxPictureViewWidth<imgWidth/1.5?maxPictureViewWidth:imgWidth/1.5,
                  viewHeight:maxPictureViewHeight<imgHeight/1.5?maxPictureViewHeight:imgHeight/1.5
                })
              }else{//图片宽度比高度多判断宽度有没有大于视窗宽度，没大于不进行缩放直接显示
                //console.log("图片宽度不大于视窗最大宽度")
                that.setData({
                  imgWidth:imgWidth/2,
                  imgHeight:imgHeight/2,
                  viewWidth:imgWidth/2,
                  viewHeight:imgHeight/2
                })
              }
            }else{//图片高度多
              // console.log("图片高度多");
              if(imgHeight>maxPictureViewHeight){
                //console.log("图片高度大于视窗最大高度");
                var product = maxPictureViewHeight/imgHeight;
                if(imgWidth>maxPictureViewWidth){
                  product = maxPictureViewHeight/imgHeight;
                }
                imgWidth = (imgWidth*product).toFixed(1);
                imgHeight = (imgHeight*product).toFixed(1);
                that.setData({
                  imgWidth:imgWidth,
                  imgHeight:imgHeight,
                  viewWidth:imgWidth,
                  viewHeight:maxPictureViewHeight
                })
              }else{
                that.setData({
                  imgWidth:imgWidth,
                  imgHeight:imgHeight,
                  viewWidth:imgWidth,
                  viewHeight:imgHeight
                })
              }
            }
          }
        } 
      }) 
    },
    moved: function(){
      // console.log("组件实例被移动到节点树另一个位置");
    },
    created: function(){
      // console.log("组件实例刚刚被创建时执行");
    },
    ready: function() {
      // console.log("组件布局完成");
    },
  },
  methods:{
    pImg:function(e){
      var imgurl = e.target.dataset.imgurl;
      var list = [];
      list.push(imgurl);
      wx.previewImage({
        urls: list,
      })
    },
  },
  pageLifetimes:{
    hide: function() {
      // console.log("组件所在页面隐藏");
    },
  },
  options: {
      multipleSlots: true,
      addGlobalClass: true
  },
  properties: {
    imgUrl:{
      type: String,
      value: ''
    }
  },
  data: {
    viewWidth:0,
    viewHeight:0,
    imgWidth:0,
    imgHeight:0,
  },
});

WXML

<view style="width:{{viewWidth}}px;height:{{viewHeight}}px;overflow:hidden;border-radius: 5px;">
  <image style="width:{{imgWidth}}px;height:{{imgHeight}}px;" bindtap="pImg" src="{{imgUrl}}" data-imgurl="{{imgUrl}}"></image>
</view>

WXSS跟JSON啥都没有就不贴

使用方法
在要使用组件的页面对应的JSON文件中进行操作：引用组件

{
  "usingComponents": {
    "adaptivePicture": "/component/adaptivePicture/adaptivePicture"
  }
}

然后在页面中，于要使用自适应图片的位置使用以下标签即可

<adaptivePicture imgUrl="图片地址"></adaptivePicture>

注意:此处图片需要js动态获取图片宽高，如果图片地址直接使用io流会报错，想要使用需要用小程序对应接口把图片缓存下来生成链接再填入(接口叫啥忘了，这样做可能有性能隐患，不建议使用)

图片最大视窗区域
在这里插入图片描述
位于组件JS代码最上面的一块，设图片长宽最多能显示多少，如果图片长的一边超过这个视窗，会被缩放/裁剪到这个能容下在视窗内，所以针对场景规划合理的视窗对样式有能多的帮助(正常来讲应该使用用户手机屏幕的宽高，使用百分比来动态控制视窗区域而不是固定的像素，但考虑小程序连横屏都没有，用户屏幕宽度也都差不多，使用场景也差不多，就不画蛇添足了。不会真有人拿平板用小程序吧，不会吧不会吧)

直接看不同比例图片效果图
在这里插入图片描述

在这里插入图片描述
最后两张图发生了截取，放大后可看到原图
在这里插入图片描述
在这里插入图片描述

可以看到最终效果跟设想的已经差不多了，样式也可以增加上

通用版图片自适应

JS

Component({
  lifetimes:{
    detached: function() {
      //console.log("组件实例被从页面节点树移除");
    },
    attached: function(){
      //console.log("组件实例进入页面节点树");
      
      var that = this;
      wx.getImageInfo({ 
        src: that.properties.imgUrl,
        success: function (res) {  
          var imgWidth=res.width;
          var imgHeight=res.height;

          var maxPictureViewWidth = 360;//图片视窗最大宽度
          var maxPictureViewHeight = 220;//图片视窗最大高度

          var ratio = imgWidth/imgHeight;

          if(ratio<0.25 || ratio>2.2){//图片宽高比相差过大,可能需要截取
            //判断图片是过高还是过宽
            if(imgWidth>imgHeight){//图片过宽
              if(imgHeight>maxPictureViewHeight){//同时判断图片高度有没有大于视窗最大高度
                //图片过宽且图片高度大于视窗最大高度,依据高度缩减图片比例到视窗可见范围,宽度不管直接靠视窗截取多的部分不显示
                var product = maxPictureViewHeight/imgHeight;
                imgHeight=imgHeight*product
                imgWidth=imgWidth*product
                that.setData({
                  viewHeight:maxPictureViewHeight,
                  viewWidth:maxPictureViewWidth,
                  imgHeight:imgHeight,
                  imgWidth:imgWidth
                })
              }else{//图片高度小于视窗最大高度
                that.setData({
                  viewHeight:imgHeight,
                  viewWidth:maxPictureViewWidth,
                  imgHeight:imgHeight,
                  imgWidth:imgWidth
                })
              }
            }else{//图片过高
              if(imgWidth>maxPictureViewWidth){
                //图片过高且图片宽度大于视窗最大宽度,按照宽度缩减图片比例到视窗可见范围,高度不管直接靠视窗截取不显示
                var product = maxPictureViewWidth/imgWidth;
                imgHeight=imgHeight*product
                imgWidth=imgWidth*product
                that.setData({
                  viewHeight:maxPictureViewHeight,
                  viewWidth:maxPictureViewWidth,
                  imgHeight:imgHeight,
                  imgWidth:imgWidth
                })
              }else{//图片宽度小于视窗最大宽度
                that.setData({
                  viewHeight:maxPictureViewHeight,
                  viewWidth:maxPictureViewWidth,
                  imgHeight:imgHeight,
                  imgWidth:imgWidth
                })
              }
            }
          }else{//图片宽高比相差不大，按照原图比例缩放显示
            //console.log("图片宽高比相差不大");
            if(imgWidth > imgHeight){//图片宽度多,图片可能是正方形,宽高比例为1,不过没关系进哪个判断都一样
              //console.log("图片宽度多")
              if(imgWidth>maxPictureViewWidth){//图片宽度比高度多且宽度大于视窗最大宽度，进行等比缩放
                //console.log("图片宽度大于视窗最大宽度")
                var product = maxPictureViewWidth/imgWidth;
                if(imgHeight>maxPictureViewHeight){
                  product = maxPictureViewHeight/imgHeight;
                }
                imgWidth = (imgWidth*product).toFixed(1);
                imgHeight = (imgHeight*product).toFixed(1);
                that.setData({
                  imgWidth:imgWidth,
                  imgHeight:imgHeight,
                  viewWidth:maxPictureViewWidth,
                  viewHeight:maxPictureViewHeight
                })
              }else{//图片宽度比高度多判断宽度有没有大于视窗宽度，没大于不进行缩放直接显示
                //console.log("图片宽度不大于视窗最大宽度")
                that.setData({
                  imgWidth:imgWidth,
                  imgHeight:imgHeight,
                  viewWidth:maxPictureViewWidth,
                  viewHeight:maxPictureViewHeight
                })
              }
            }else{//图片高度多
              // console.log("图片高度多");
              if(imgHeight>maxPictureViewHeight){
                //console.log("图片高度大于视窗最大高度");
                var product = maxPictureViewHeight/imgHeight;
                if(imgWidth>maxPictureViewWidth){
                  product = maxPictureViewHeight/imgHeight;
                }
                imgWidth = (imgWidth*product).toFixed(1);
                imgHeight = (imgHeight*product).toFixed(1);
                that.setData({
                  imgWidth:imgWidth,
                  imgHeight:imgHeight,
                  viewWidth:maxPictureViewWidth,
                  viewHeight:maxPictureViewHeight
                })
              }else{
                that.setData({
                  imgWidth:imgWidth,
                  imgHeight:imgHeight,
                  viewWidth:maxPictureViewWidth,
                  viewHeight:maxPictureViewHeight
                })
              }
            }
          }
        } 
      }) 
    },
    moved: function(){
      // console.log("组件实例被移动到节点树另一个位置");
    },
    created: function(){
      // console.log("组件实例刚刚被创建时执行");
    },
    ready: function() {
      // console.log("组件布局完成");
    },
  },
  methods:{
    pImg:function(e){
      var imgurl = e.target.dataset.imgurl;
      var list = [];
      list.push(imgurl);
      wx.previewImage({
        urls: list,
      })
    },
  },
  pageLifetimes:{
    hide: function() {
      // console.log("组件所在页面隐藏");
    },
  },
  options: {
      multipleSlots: true,
      addGlobalClass: true
  },
  properties: {
    imgUrl:{
      type: String,
      value: ''
    }
  },
  data: {
    viewWidth:0,
    viewHeight:0,
    imgWidth:0,
    imgHeight:0,
  },
});

WXML跟上面的基本一致

<view style="width:{{viewWidth}}px;height:{{viewHeight}}px;overflow:hidden;border-radius:1%;">
  <image style="width:{{imgWidth}}px;height:{{imgHeight}}px;border-radius:1%;" catchtap="pImg" src="{{imgUrl}}" data-imgurl="{{imgUrl}}"></image>
</view>

两个区别：聊天室的那个当图片超过视窗显示区域，缩放后会比视窗显示区域还要小1一倍左右
通用版当图片超过视窗显示区域等比缩放后，图片长边宽/高跟视窗显示区域的宽/高一致

所以通用版更适合用在图片本身为主体不需要贴合其他元素的场景(如帖子封面,缩略图)
在这里插入图片描述
最后有不同看法，改进方法欢迎留言讨论，希望帖子帮到大家哈哈

ID=newString
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Android仿微信群聊头像
09-02
主要为大家介绍了Android仿微信群聊头像的相关资料，感兴趣的小伙伴们可以参考一下
仿微信 聊天 发图片 发文字 发语音
10-08
仿微信 聊天 发图片 发文字 发语音
小程序实现仿微信图片裁切功能
weixin_46414427的博客
12-17 327
详细链接:https://developers.weixin.qq.com/community/develop/doc/000ac078a40410da8ce7be33c56c06 组件GitHub 地址 https://github.com/yunlzhang/miniprogram-cropper-component 1.先把组件下载下来放入项目的component文件夹中 2.在需要使用该组件的页面注册该组件 在该目录的json文件中引入组件 index.json 3.在该目录的wxml文件中使
微信小程序聊天功能（仿微信）- - -附效果图
换日线的博客
05-09 4602
效果图如下所示 语音功能因为是在电脑上所以不能使用,想看完整手机版的视频可以加 QQ:1010753897 查看完整视频 有什么问题欢迎评论留言，我会及时回复你的
微信小程序聊天功能（可以发文字和图片，不能发视频）
我心坚持
05-07 4042
一、搜索微信公众平台：https://mp.weixin.qq.com/ 添加客服人员 二、找到APPID 三、使用APPID登录进去你的小程序；输入button按钮（必须是button），如果不想显示button按钮，可以将按钮设置成透明，大小和div一样大。 <view class="container"> <button class="kefu" open-type="contact">联系卖家</button> </view> 四、必须进
仿微信图片编辑软件，涂鸦、裁剪、添加文本等常规操作
qq_42811161的博客
12-19 1043
1、需求 在做一个野外地质数据采集软件开发的过程中，有时候需要进行拍照保存，在此，我们直接通过Intent调用系统的拍照功能；然后，调用系统的裁剪功能，可以按照需要的大小进行裁剪；但是但是但是。。。。。。业主爸爸觉得都太简单、太粗糙、无法添加文字、无法进行画线条也就是涂鸦，奈何时间比较紧凑，时间很赶*（其实是实力不够）*，就需要在网上找一个框架，然后自己进行改动即可。网上的框架大多是图片数据的加载，关于编辑的却很少，即使有也是侧重于贴图、美化，这些功能的导入就显得很多余，也完全没有必要，于是，继续找，找啊找
微信小程序仿照微信拖动缩放图片和截取头像
KevinsCSDN的博客
01-14 3420
效果图 整体思路： 实现图片的缩放和拖动； 在图片上方盖上中间镂空的半透明遮罩； 根据截取方框区域的图片。截图时，在方框区域将截取的图片绘制出来，然后使用wx.canvasToTempFilePath截取图片。 实现过程和遇到的问题： 实现缩放和拖动最初是使用touchStart和touhMove，处理触摸事件来实现图片的缩放和拖动，但是这样的实现在小程序上会很卡。后来无意中发现了小程序提...
小程序-仿微信朋友圈拖动删除图片
幽蛰的博客
01-18 1085
♠ 目的 微信小程序实现图片拖动删除，效果同朋友圈的图片拖动删除效果 ♠ 实现原理 1、使用微信小程序组件 movable-area 和 movable-view 进行拖动处理 2、根据屏幕高度、图片高度、当前页面位置，图片拖动位置，进行计算，确定拖动到删除位置 ♠ 具体实现 1、使用 movable-area 和 movable-view 进行拖动处理 2、根据屏幕高度、图片高度、当前页面位置，图片拖动位置，进行计算，确定拖动到删除位置 3、拖动结束后，比较位置。如果删除，则删除；否则，归位(即x/y
微信小程序图片删除php,关于微信小程序中图片处理的问题汇总
weixin_30322969的博客
03-22 150
在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片...
仿微信.QQ聊天界面
iosYangming的博客
08-30 6604
仿微信.QQ聊天界面,气泡图 自适应箭头图片   最近做了一个IM的项目.关于实现IM有很多方法.毕竟协议就那么几种.开源的可以用XMPPFramework等, 第三方有融云、环信等.若只是实现临时通信还可以用WebSocket. 这些技术网上实现的demo多的一笔.但是只是实现了功能.作为客户端很多UI实现的细节并没有做到.  现在把聊天界面实现的细节记录一下. 我用的是X
android高仿微信聊天界面，语音，表情，拍照及本地图片选择功能
05-14
android高仿微信聊天界面，语音，表情，拍照及本地图片选择功能
仿微信聊天气泡图片
10-29
android仿微信QQ聊天气泡图片（imageview），带图片变暗有进度条和进度值优化了BubbleImageView
类似于微信的聊天气泡图片
07-20
用draw9patch.bat绘制的气泡图片用在Android程序中有黑线，怎么解决？ 下载这个压缩包，也可以参考我的博客自己动手做。 http://blog.csdn.net/rock4you/article/details/51971283
微信小程序 内容自适应textarea表单组件（autoheight_textarea）
01-30
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： 写个评论" bindinput="listenerinput"></autoheight_textarea>
微信小程序图片自适应支持多图实例详解
01-19
微信小程序图片自适应支持多图实例详解 微信小程序图片自适应，是一个比较常见的需求，平时我们在WEBView中，只需要设置max-width:100%.在微信里面虽然widthFix也能实现，但有一个缺陷就是图片的宽度值要大于或者...
微信小程序实现image组件图片自适应宽度比例显示的方法
08-28
主要介绍了微信小程序实现image组件图片自适应宽度比例显示的方法,简单讲述了image组件的常用属性,并结合实例形式分析了微信小程序实现图片自适应宽度比例的相关操作技巧,需要的朋友可以参考下
微信小程序实现图片自适应(支持多图)
12-12
大家都知道微信小程序图片自适应，是一个比较常见的需求，平时我们在WEBView中，只需要设置max-width:100%.在微信里面虽然widthFix也能实现，但有一个缺陷就是图片的宽度值要大于或者等于设定的值，否则就会发生拉伸...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 530
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1021
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
微信小程序图片自适应
08-02
微信小程序中的图片自适应可以通过以下两种方法实现。首先，可以使用image组件的mode属性来控制图片的展示方式。...总之，通过使用image组件的mode属性或自定义样式，可以实现微信小程序中图片的自适应比例显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值