微信小程序保存图像的问题。？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。3被浏览396分享邀请回答赞同 添加评论分享收藏感谢收起微信小程序image图片自适应宽度比例显示的方法
我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性：1、src
图片资源地址2、mode
图片裁剪、缩放的模式3、binderror
当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}4、bindload
当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}
但是image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了，特别是我们在做一些商品详情页的时候，需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢？可以有两种方法：
一、使用mode：widthFixwidthFix：宽度不变，高度自动变化，保持原图宽高比不变。
首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。
这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位二、使用bindload绑定函数动态自适应。
我们可以给image绑定一个函数，这个函数，如上面的bindload说明一样，我们可以获取到原图的宽度和高度。
然后计算他们的宽高比率。。然后设置一个宽度大小（rpx），最后通过style动态设置image的宽高。代码如下：
html代码：
&image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }} height:{{ images[index].height }}"&&/image&
imageLoad: function(e) {
var $width=e.detail.width,
//获取图片真实宽度
$height=e.detail.height,
ratio=$width/$
//图片的真实宽高比例
var viewWidth=718,
//设置图片显示宽度，左右留有16rpx边距
viewHeight=718/
//计算的高度值
var image=this.data.
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
this.setData({
images:image
最后，我们就可以可以通过images[index].width 和 images[index].height给每一个图片设置宽高了。
以上是自己在玩小程序时，关于image自适应方法的简单记录。。
效果如下图所示：
原文地址：
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
你好，我们现在在做一个名片的小程序，请问小程序里怎么把一个页面转为图片，有这种js接口吗？谢谢，我尝试过使用canvas，但小程序无法获取dom。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
it!wx.canvasToTempFilePath(OBJECT)
把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个？你试试看
后续图片地址可以用 wx.previewImage(OBJECT) 预览
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
还是 canvas 画，或者可以考虑服务器端生成
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
推荐 phantomjs
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你好，楼主有解决生成图片问题了吗？我也遇到这个问题
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有一款叫 “制作器” 的小程序实现了，楼主实现这个了吗，求分享啊！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你好，楼主有解决生成图片问题了吗？我也遇到这个问题
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。鍙?渶涓}