最近做了一个生成海报的项目,有个需求需要画出图片。
我个人的想法是生成的图片像image的mode模式中的aspectFill显示的图片那样,“缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。”
也就是说保证图片的短边显示出来,超过的部分会被截取掉,图片不会变形
翻看了小程序文档的CanvasContext.drawImage。然后整理了一下以下的代码,此代码只为了说明CanvasContext.drawImage
wxml:
<canvas style="width:300px;height:300px" canvas-id="actReview"></canvas>
js中的生成图片的代码如下:
let ctx = wx.createCanvasContext('actReview')
let img = {
url:'/static/images/img-actImage.png'
}
// 取得图片的宽高
wx.getImageInfo({
src:img.url,
success (res) {
// 绘制白色背景
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 300, 300)
let imgX = 50 //图片在画布上的x轴坐标
let imgY = 50 //图片在画布上的y轴坐标
let imgW = 200 //图片在画布上的宽度
let imgH = 200 //图片在画布上的高度
let visibleW = res.width//截取的图片的宽度
let visibleH = res.height//截取的图片的高度
let visibleX = null // 所截取的图片的x轴坐标
let visibleY = null // 所截取的图片的y轴坐标
let imgBili = imgW / imgH
let visibleBili = visibleW / visibleH
if(imgBili < visibleBili){
let newW = (imgH / visibleH) * visibleW
const bili = newW / visibleW
visibleX = Math.abs(imgW - newW) / 2 / bili
visibleY = 0
visibleW = imgW * visibleH / imgH
}else {
visibleX = 0
let newH = (imgW * visibleH) / visibleW
const bili = newH / visibleH
visibleY = Math.abs(imgH - newH) /2 / bili
visibleH = visibleW * imgH / imgW
}
/**
* ctx.drawImage(
* 图片的url,
* 所截取的图片的X轴坐标,
* 所截取的图片的Y轴坐标,
* 所截取的图片的宽度,
* 所截取的图片的高度,
* 图片在画布的X轴坐标,
* 图片在画布的Y轴坐标,
* 图片在画布的宽度,
* 图片在画布的高度)
*/
ctx.drawImage(img.url, visibleX, visibleY, visibleW, visibleH,imgX, imgY, imgW, imgH)
ctx.draw()
},
fail (e) {
console.log(e)
}
})
生成的效果图(红色框框部分):
图片原图: