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/viewview wx:if="{{!!info}}" class='result' text space="nbsp"{{info}}/text/viewjs:
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 '{' + Object.keys(obj).map(function(key) { return ' ' + key + ': ' + obj[key] + ',' }).join('') + '' + '}' },})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.pngPage({ 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 '{' + Object.keys(obj).map(function(key) { return ' ' + key + ': ' + obj[key] + ',' }).join('') + '' + '}' }, //预览图片--实现长按识别微信小程序二维码 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点击图片预览-长按识别微信小程序二维码/textcanvas id='mycanvas' canvas-id='mycanvas' class='mycanvas'catchtap='clickCanvas'/canvasjs
// one/one.jsPage({ /** * 页面的初始数据 */ data: { image: "../images/qq-map.png", }, //生成临时网络图片地址，预览图片，长按识别二维码 clickCanvas: function() { console.log('clickCanvas') let _this = this; //延时0.5s setTimeout(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(); //选择id query.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(); },})
。。。
小程序
