微信小程序 html2image,微信小程序媒体组件（二）image

2.wxml代码↓

imagetext>

{{item.text}}view>

image>

view>

view>

view>

view>

①array中mode定义了图片的裁剪、缩放模式，text定义了图片的注解，src图片源，均在js文件中进行定义。

data: {

src: '../../resources/image/bing.jpg',

array: [{

mode: 'scaleToFill',

text: 'scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'

}, {

mode: 'aspectFit',

text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。'

}, {

mode: 'aspectFill',

text: 'aspectFill:保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。'

}, {

mode: 'widthFix',

text: 'widthFix:宽度不变，高度自动变化，保持原图宽高比不变'

}, {

mode: 'top',

text: 'top：不缩放图片，只显示图片的顶部区域'

}, {

mode: 'bottom',

text: 'bottom：不缩放图片，只显示图片的底部区域'

}, {

mode: 'center',

text: 'center：不缩放图片，只显示图片的中间区域'

}, {

mode: 'left',

text: 'left：不缩放图片，只显示图片的左边区域'

}, {

mode: 'right',

text: 'right：不缩放图片，只显示图片的右边边区域'

}, {

mode: 'top left',

text: 'top left：不缩放图片，只显示图片的左上边区域'

}, {

mode: 'top right',

text: 'top right：不缩放图片，只显示图片的右上边区域'

}, {

mode: 'bottom left',

text: 'bottom left：不缩放图片，只显示图片的左下边区域'

}, {

mode: 'bottom right',

text: 'bottom right：不缩放图片，只显示图片的右下边区域'

}]

},

②binderror监听图片错误，在js中实现，查看错误信息

imageError: function (e) {

console.log('============================================')

console.log('image发生error事件，携带值为', e.detail.errMsg)

console.log('============================================')

}

如，设定一个无法访问的src，控制台输出如下信息↓

3.效果图

(1)缩放模式

①scalToFill模式：完全适应image的width及height(在该例中，分别为280px和150px)

②asprctFit模式：按比例缩小，完整的将图片显示出来，多余的部分由背景色#ddd补充

③aspectFill模式：按比例缩小，保证至少一个方向完整显示(红色框约为被裁掉的部分)

④widthFix模式：宽度不变(该例中280px)，高度自动变化，保证图片完整显示。

(2)裁剪模式，看两个例子：

完整的对应位置如下图所示↓

5.最后附上wxss的代码

.imageStyle {

width: 280px;

height: 150px;

background: #ddd;

}

.imageText {

margin-top: 20px;

}

.imageContent {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

}

其中imageContent保证了图片的性质

justify-content：水平居中

align-items：竖直居中