wx.getImageInfo()如何获取图片信息

本文主要为大家详细介绍了微信小程序wx.getimageinfo()如何获取图片信息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

一.知识点

wx.getImageInfo()如何获取图片信息

二.列子

(1).加载时

        图片的大小:{{imgwidth}}px*{{imgheight}}px 

登录后复制

var app = getApp()  Page({   data: {      tempFilePaths: '../uploads/foods.jpg',     imgwidth:0,     imgheight:0,    },   onReady:function(){     // 页面渲染完成      var _this = this;      wx.getImageInfo({       src: _this.data.tempFilePaths,       success: function (res) {         _this.setData({           imgwidth:res.width,           imgheight:res.height,         })       }     })    }  })

登录后复制

wx.getImageInfo()如何获取图片信息

(2).上传图片时

           图片的大小:{{imgwidth}}px*{{imgheight}}px 

登录后复制

.zn-uploadimg{   padding:1rem; } .zn-uploadimg image{   margin:1rem 0; }

登录后复制

var app = getApp()  Page({   data: {      tempFilePaths: '',      imgwidth:0,     imgheight:0,   },   /**     * 上传图片    */   chooseimage: function () {      var _this = this;      wx.chooseImage({        count: 1, // 默认9        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有        success: function (res) {          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片          _this.setData({            tempFilePaths:res.tempFilePaths          })          wx.getImageInfo({           src: res.tempFilePaths[0],           success: function (res) {             _this.setData({               imgwidth:res.width,               imgheight:res.height,             })           }         })        }      })    }  })

登录后复制

wx.getImageInfo()如何获取图片信息

相关推荐:

javascript如何获取图片的top N主色值

PHP获取图片主色调的方法介绍

分享一个JS实现获取图片大小和预览的方法

以上就是wx.getImageInfo()如何获取图片信息的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2788139.html

(0)
上一篇 2025年3月8日 18:22:21
下一篇 2025年3月8日 18:22:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • selenium抓取淘宝的商品信息

    淘宝的页面大量使用了js加载数据,所以采用selenium来进行爬取更为简单,selenum作为一个测试工具,主要配合无窗口浏览器phantomjs来使用。本文主要为大家分享一篇使用selenium抓取淘宝的商品信息实例,具有很好的参考价值…

    编程技术 2025年3月8日
    200
  • Vue封装Swiper实现图片轮播效果的代码分享

    本文主要和大家分享vue封装swiper实现图片轮播效果的代码,图片轮播是前端中经常需要实现的一个功能。最近学习vue.js,就针对swiper进行封装,实现一个简单的图片轮播组件。 一、Swiper 在实现封装之前,先介绍一下Swiper…

    2025年3月8日
    200
  • JS实现图片轮播的实例

    本文主要为大家带来一篇使用js实现图片轮播的实例(前后首尾相接),代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能。 效果如下: nbsp;html PUBLIC “-//W3…

    2025年3月8日
    200
  • FileReader实现上传图片前本地预览

    平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到url再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下。    …

    编程技术 2025年3月8日
    200
  • React Native如何实现图片查看组件

    react native 图片查看组件:react-native-image-viewer,纯js组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。本文主要和大家介绍了react na…

    2025年3月8日
    200
  • 如何使用python来判断图片相似度

    这次给大家带来如何使用python来判断python相似度,使用python来判断图片相似度的python有哪些,下面就是实战案例,一起来看一下。 python 判断图片相似度一个十分简单的示例,只是个例子,精度可能不是很高。主要介绍一下原…

    编程技术 2025年3月8日
    200
  • 细说图片懒加载以及预加载

     本篇文章讲述了图片懒加载以及预加载,大家对图片懒加载以及预加载不了解的话或者对细说图片懒加载以及预加载感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧! 1.懒加载 认识一个新的东西,那么就从what、why开始。即想要…

    编程技术 2025年3月8日
    200
  • 通过js异步加载图片实现方法

    本文主要和大家分享通过js异步加载图片实现方法,主要是考虑到网络的限制,为了更好的用户体验,采用异步加载显示的方法为img加载图片,直接贴代码:  标签: 登录后复制登录后复制 js: function getHead(obj,portra…

    编程技术 2025年3月8日
    200
  • JS超链接实现动态显示图片

    本文主要和大家分享JS超链接实现动态显示图片,主要以代码的形式和大家分享,希望能帮助到大家。 nbsp;html>         onload = function () { var al = document.getElement…

    编程技术 2025年3月8日
    200
  • JS获取图片的top N色值方法

    这次给大家带来JS获取图片的top N色值方法,JS获取图片top N色值的注意事项有哪些,下面就是实战案例,一起来看一下。 题目要求 找出一个页面中出现次数最多的标签!!! 个人解法: var eles = document.getEle…

    2025年3月8日
    200

发表回复

登录后才能评论