在使用drawImage画网络图片时,需要画出的图片可能会与设计尺寸不符,此时绘制的图片会被压缩或者拉伸,十分不美观。
微信在1.9.0后支持设置更多属性来处理,方法如下
drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
但是文档比较简单,试验过后发现不能满足需求QAQ,所以写了一些简单的处理
下面是随便写的一个类似微信aspectFill适配方式的函数
// canvas 图片适配(aspectFill)
function imageSizeFill(imageSize, w, h) {
// 宽高小于目标图形时,差距大的边变相等优先
// 宽高大于目标图形时,差距小的边变相等优先
// 宽高一个大于目标图形,一个小于目标图形时,小的边优先执行以上规则
if (imageSize.width < w) { // 如果原有图片宽度小于画图宽度
if (imageSize.height < h) { // 如果原有图片高度小于画图高度
// 计算宽度比
var scaleW = w / imageSize.width;
// 计算高度比
var scaleH = h / imageSize.height;
if (scaleW > scaleH) { // 如果宽度比更大,代表宽度相差更多,需要变大更多,所以宽度等于画图宽度,高度同比例变大后截取,比例相同则无论哪种方式都会同比例放大
imageSize.height = imageSize.height / imageSize.width * w;
imageSize.width = w
} else { // 如果高度比更大,代表高度相差更多,需要变大更多,所以高度等于画图高度,宽度同比例变大后截取,比例相同则无论哪种方式都会同比例放大
imageSize.width = imageSize.width / imageSize.height * h;
imageSize.height = h
}
} else { // 如果原有图片高度大于等于画图高度,则一定是宽度等于画图宽度,高度同比例变大后截取
imageSize.height = imageSize.height / imageSize.width * w;
imageSize.width = w
}
} else { // 如果原有图片宽度大于等于画图宽度
if (imageSize.height > h) {
// 计算宽度比
var scaleW = w / imageSize.width;
// 计算高度比
var scaleH = h / imageSize.height;
if (scaleW > scaleH) { // 如果宽度比更大,代表宽度相差更少,需要变小更少,所以宽度等于画图宽度,高度同比例变大后截取,比例相同则无论哪种方式都会同比例放大
imageSize.height = imageSize.height / imageSize.width * w;
imageSize.width = w
} else { // 如果高度比更大,代表高度相差更少,需要变小更少,所以高度等于画图高度,宽度同比例变大后截取,比例相同则无论哪种方式都会同比例放大
imageSize.width = imageSize.width / imageSize.height * h;
imageSize.height = h
}
} else { // 如果原有图片高度小于等于画图高度,则一定是高度等于画图高度,宽度同比例变大后截取
imageSize.width = imageSize.width / imageSize.height * h;
imageSize.height = h
}
}
console.log('改变imageSize', imageSize.width, imageSize.height)
return imageSize;
}
使用的话首先需要下载图片
wx.getImageInfo({
src: netUrl, //请求的网络图片路径
success: function (res) {
console.log('下载网络图片成功', res)
success(res);
},
fail: function (res) {
console.log('下载网络图片失败', res)
fail(res)
}
})
返回值res中会有width与height,之后就可以去绘制图片了
var iamgeSize = self.imageSize({ width: res.width, height: res.height }, width,height)
ctx.save();
self.roundRect(ctx, left, top, width, height, 0, '', '') // 画边框
ctx.drawImage(res.path, left - (iamgeSize.width - width) / 2.0, top - (iamgeSize.height - height) / 2.0, iamgeSize.width, iamgeSize.height)
ctx.restore();
其中roundRect方法在上一篇中有写,其他适配方式也大致差不多,比如aspectFit
// 图片适配(aspectFit)
imageSize: function (imageSize, w, h) {
var scale, imageHeight, imageWidth;
scale = imageSize.width / imageSize.height;
imageHeight = w / scale;
if (imageHeight > h) {
imageWidth = h * scale;
imageSize.width = imageWidth;
imageSize.height = h;
}else{
imageSize.width = w;
imageSize.height = imageHeight;
}
console.log('改变imageSize', imageSize.width, imageSize.height)
return imageSize;
},
画图与第一个有点区别
var imageSize = self.logoImageSize({ width: res.width, height: res.height }, width, height)
self.roundRect(ctx, left, top, width, height, radius, '','') // 画边框
if (imageSize.width > imageSize.height) {
ctx.drawImage(res.path, left, top + (height - imageSize.height) / 2.0, width, imageSize.height)
} else {
ctx.drawImage(res.path, left + (width - imageSize.width) / 2.0, top, imageSize.width, height)
}
ctx.restore()