微信小程序，画布中，根据需要展示的图片比例，获取能截取原图中的最大图片尺寸，并且不变形展示

在微信小程序中，想要做一个分享海报，就需要用到画布，在画布上绘制图片时就会遇到图片变形的情况，下面我会给出我的解决办法。

先画个图片意思意思下：

1. 先根据传入图片地址获取原图片的尺寸；

// 获取图片的 w，h
function getImgInfo(src,callback){
wx.getImageInfo({
src: src,
success(res){
console.log(res)
callback&&callback(res)
return res
}
})
}

2. 根据传入的需要展示的尺寸，得出需要展示的图片比例，w / h；

根据获取到的原始图片尺寸，得到原始图片的比例，imgH / imgW；

获取能在图片中按对应比例能够截取的最大尺寸；

if ( imgH / imgW > w / h ) {

在比例上，原始图片的宽度多出
所以根据较短的一边来计算，按照高度imgH来计算最终截取尺寸。能截取的最大高度maxH为原始图片的高度maxHeight = imgH，最大宽度maxWidth = imgH / h * w

如果需要从中间截取图片，则只需取x轴方向上居中即可。 dx = (imgW - maxWidth) / 2

}else{

在比例上，原始图片的高度多出
所以根据较短的一边来计算，按照宽度imgW来计算最终截取尺寸。能截取的最大宽度maxW为原始图片的宽度maxWidth = imgW，最大高度maxHeight = imgW / w * h

如果需要从中间截取图片，则只需取y轴方向上居中即可。 dy = (imgH - maxHeight) / 2

}

完整代码如下：


// 获取图片的 w，h
function getImgInfo(src,callback){wx.getImageInfo({src: src,success(res){console.log(res)callback&&callback(res)return res}})
}// 获取能在图片中按对应比例能够截取的最大尺寸
// 传入图片地址和需要展示的尺寸
function getImgFromSize(src, w, h){return new Promise((resolve, reject)=>{let size = {}getImgInfo(src, (res) => {const imgW = res.widthconst imgH = res.heightconsole.log(imgW, imgH)let maxWidth = ''let maxHeight = ''let dx = ''let dy = ''if ((imgW / imgH) > (w / h)) {// 在比例上，原始图片的宽度多出// 所以根据较短的一边来计算，按照高度imgH来计算最终截取尺寸maxWidth = imgH / h * wmaxHeight = imgHdx = (imgW - maxWidth) / 2dy = 0} else {// 在比例上，原始图片的高度多出// 所以根据较短的一边来计算，按照宽度imgW来计算最终截取尺寸maxWidth = imgWmaxHeight = imgW / w * hdx = 0dy = (imgH - maxHeight) / 2}resolve({maxWidth,maxHeight,dx,dy})})})
}

3. 接下来就是怎么用了

用微信的画布中绘制图片的api，CanvasContext.drawImage(string imageResource, number dx, number dy, number dWidth, number dHeight, number sx, number sy, number sWidth, number sHeight)

使用方法：

getImgFromSize(src, w, h).then((res)=>{

// 在res中返回结果：res.maxWidth, res.maxHeight, res.dx, res.dy

CanvasContext.drawImage(res.dx, res.dy, res.maxWidth, res.maxHeight, sx, sy, sW, sH )

})

参数

string imageResource

所要绘制的图片资源

number dx

图像的左上角在目标 canvas 上 x 轴的位置

number dy

图像的左上角在目标 canvas 上 y 轴的位置

number dWidth

在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放

number dHeight

在目标画布上绘制图像的高度，允许对绘制的图像进行缩放

number sx

源图像的矩形选择框的左上角 x 坐标

number sy

源图像的矩形选择框的左上角 y 坐标

number sWidth

源图像的矩形选择框的宽度

number sHeight

源图像的矩形选择框的高度

初来乍到，多多关照！

微信小程序，画布中，根据需要展示的图片比例，获取能截取原图中的最大图片尺寸，并且不变形展示相关推荐

黯然微信小程序杂记（一）：从服务器获取数据后端语言php
黯然学编程之微信小程序杂记(一):从服务器获取数据后端语言php 一.功能描述二.服务器.数据库与微信小程序逻辑的关系服务器数据库与微信小程序逻辑关系三.请求数据的代码(可当做模板用) ...
微信小程序之登录跳转及调用接口获取信息
最近学习微信小程序,新学了网页跳转及获取个人信息网页跳转需要 wx.switchTab方法获取信息的话,首先调用接口,然后取出数据就可以了. 首先创建两个html文件,代码如下 <view ...
微信小程序画布实现冒泡点赞，三阶贝塞尔曲线
一.核心代码 1)wxml 核心代码 <canvas wx:for="{{bezierCount-0}}" wx:key="key" class=&quo ...
微信小程序画布组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 画布组件,我们可以做一些绘图和动画效果.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有 ...
微信小程序画布画时针转盘
需求:使用微信小程序画一个12时辰的转盘,每两一个小时转盘上的指针跳动一次,每隔两个小时转盘分区跳动一次. canvas.wxml <view class="canvas-conten ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
微信小程序 - 高级 - 深度实践 - wx:for 与 wx:for-items 与 wx:for-item 与 wx:key - 2 嵌套菜单的中文展示的方法 - 和官网不同
前一篇里面对wx:for 与 wx:for-items 与 wx:key的应用做了比较深入的探讨,这一节讲一个实际项目遇到的问题,和解决的办法. 1 简述DEMO的样式: 微信Demo里面的菜单嵌套的 ...
微信小程序-仿淘宝(附真机测试图)（持续更新中。。。）
醉前端微信小程序已开始公测, 醉前端的开发热情依然不减... 这是仿手机淘宝做的微信小程序,目的在于享受开发,学习小程序,欢迎大家批评指正. demo资源地址:demo gihub传送门 tip: ...
php silk v3 decoder,微信小程序语音搜索踩坑：silk文件格式转换，在PHP中使用
直接调用微信小程序录音接口,然后上传到服务器,百度语音的接口是识别不了这种格式的文件,那么问题来了一.如何转码?ffmpeg? 二.如何在PHP中使用? 本文将要解决这两个问题. 用到的第三方工具: ...

微信小程序，画布中，根据需要展示的图片比例，获取能截取原图中的最大图片尺寸，并且不变形展示

初来乍到，多多关照！

微信小程序，画布中，根据需要展示的图片比例，获取能截取原图中的最大图片尺寸，并且不变形展示相关推荐

最新文章

热门文章