wx.getImageInfo(Object object)

获取图片信息。网络图片需先配置download域名才能生效。

测试图片地址：http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png

返回的是json对象

{
errMsg:"getImageInfo:ok"height:571orientation:"up"path:"http://tmp/wxf49d67c14c9ef0ff.o6zAJs6cx-EB2WgljD1LQeGeFeX8.yHfdOM4R5taD297ff4e4aea3acaa3ec94eba8c6de637.png"type:"png"width:750
}

布局：

<view class="weui-panel"><view class="weui-panel__hd"></view><view class="weui-panel__bd"><image mode='widthFix' src="{{src}}" style='width: 300px;'></image><button bindtap="getImageInfo">getImageInfo</button></view><view class="weui-panel__ft"></view>
</view><view wx:if="{{!!info}}" class='result'><text space="nbsp">{{info}}</text>
</view>

js:

const app = getApp()Page({data: {src: 'http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png',info: '',},getImageInfo() {wx.getImageInfo({src: this.data.src,complete: (res) => {console.log(res)console.log(res.path)// 返回的是json对象this.setData({info: this.format(res)})}})},//格式化json对象，打印成字符串格式format(obj) {// Object.keys(obj)// Object.keys 返回一个所有元素为字符串的数组// Object.keys(obj).map// map() 方法创建一个新数组// 使用 map 重新格式化数组中的对象return '{\n' +Object.keys(obj).map(function(key) {return '  ' + key + ': ' + obj[key] + ','}).join('\n') + '\n' +'}'},
})

css:

.result {overflow-x: scroll;margin: 10px;padding: 10px;font-size: 14px;border-radius: 5px;border: 1px solid #DDD;
}

预览小程序二维码，长按识别小程序二维码：

const app = getApp()
// http://img.91ud.com/FhdFil9weQuZb9Hr_YccFkIxcMJX/256
// ../ images / qq - map.png
Page({data: {src: 'http://img.91ud.com/FhdFil9weQuZb9Hr_YccFkIxcMJX/256',info: '',},getImageInfo() {wx.getImageInfo({src: this.data.src,complete: (res) => {console.log(res)console.log(res.path)// 返回的是json对象this.setData({canvasUrl: res.path,info: this.format(res),})this.previewImage()}})},//格式化json对象，打印成字符串格式format(obj) {// Object.keys(obj)// Object.keys 返回一个所有元素为字符串的数组// Object.keys(obj).map// map() 方法创建一个新数组// 使用 map 重新格式化数组中的对象return '{\n' +Object.keys(obj).map(function(key) {return '  ' + key + ': ' + obj[key] + ','}).join('\n') + '\n' +'}'},//预览图片--实现长按识别微信小程序二维码previewImage: function (e) {console.log('previewImage')wx.previewImage({current: this.data.canvasUrl, // 当前显示图片的http链接   urls: [this.data.canvasUrl] // 需要预览的图片http链接列表   })},})

问题：wx.getImageInfo获取本地图片用的是本地地址 ,wx.previewImage要使用网络图片，本地图片预览不了。

解决：在页面初始化onLoad的时候使用canvas画图，生成临时网络地址，然后点击画布图片进行预览

wxml

<!--one/one.wxml-->
<text>点击图片预览-长按识别微信小程序二维码</text>
<canvas id='mycanvas' canvas-id='mycanvas' class='mycanvas'catchtap='clickCanvas'></canvas>

// one/one.js
Page({/*** 页面的初始数据*/data: {image: "../images/qq-map.png",},//生成临时网络图片地址，预览图片，长按识别二维码clickCanvas: function() {console.log('clickCanvas')let _this = this;//延时0.5ssetTimeout(function() {// 把当前画布指定区域的内容导出生成指定大小的图片wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {var tempFilePath = res.tempFilePath;console.log('tempFilePath=', tempFilePath);_this.setData({canvasUrl: tempFilePath})if (tempFilePath !== '') {wx.hideLoading();wx.previewImage({current: _this.data.canvasUrl, // 当前显示图片的http链接  urls: [_this.data.canvasUrl], // 需要预览的图片http链接列表  })}},fail: function(res) {console.log(res);}});}, 500);},//画二维码canvas: function() {console.log('canvas');let _this = this;let realWidth, realHeight;//创建节点选择器var query = wx.createSelectorQuery();//选择idquery.select('#mycanvas').boundingClientRect();const ctx = wx.createCanvasContext('mycanvas');query.exec(function(res) {//res就是 该元素的信息 数组realWidth = res[0].width;realHeight = res[0].height;console.log('realHeight', realHeight);console.log('realWidth', realWidth);ctx.drawImage(_this.data.image, 0, 0, realWidth, realHeight);ctx.draw();})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {this.canvas();},})

。。。

微信小程序-预览图片识别二维码相关推荐

微信小程序内部长按识别二维码添加个人微信
项目场景: 最近接到需求,在小程序内部长按识别二维码添加个人微信. 初步效果: 问题描述:web-view官方文档微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信 ...
h5嵌入微信小程序webView长按识别二维码
1.h5页面用于渲染图片 <div id="app"><div class="priview-img"><imgv-for=&qu ...
微信小程序调用摄像头扫描识别二维码和条形码
今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦. 然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能. wx.scanCode(Object object) 调起客 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
【Exception】微信小程序，配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序
[Exception]微信小程序,配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序一.问题描述 1.公司业务有个需求,扫描普通的二维码,跳转到小程序的某个页面, ...
生成微信小程序发布上线后的二维码、获取微信小程序二维码、微信小程序二维码如何生成?
情景: 1.在微信小程序审核完成,发布到线上后,想通过扫描小程序二维码进入小程序 2.可分享二维码出去,通过二维码扫码进入小程序方法: 1.进入微信小程序的后台配置.链接:微信公众平台.(如图一) ...
用uni.previewImage({}) 来直接做图片的预览和识别二维码
需求: 客户要求用户不用截图保存,通过直接用手机识别二维码关注,所以,这就需要我们进行图片的预览即可以解决. <image src="https://lr-huayoushi.oss- ...
微信小程序开发：文字转二维码
使用开源组件:weapp-qrcode-canvas-2d 亲测渲染性能,生成速度等均优于其他小程序实现方式,虽然star较少,但是目前没发现什么问题以下内容摘自github项目readme.md文 ...
微信小程序 Canvas drawImage()绘图头像二维码安卓用户显示半透明！
微信小程序 Canvas drawImage() 图片在安卓显示为半透明我遇到的是drawImage()方法绘制头像和二维码时开发工具测试没问题真机测试则出现以下样式具体问题不太清楚,有可能 ...

微信小程序-预览图片识别二维码

wx.getImageInfo(Object object)

预览小程序二维码，长按识别小程序二维码：

问题：wx.getImageInfo获取本地图片用的是本地地址 ,wx.previewImage要使用网络图片，本地图片预览不了。

微信小程序-预览图片识别二维码相关推荐

最新文章

热门文章