微信小程序CanvasContext.drawImage的用法

最近做了一个生成海报的项目，有个需求需要画出图片。

我个人的想法是生成的图片像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 / imgHlet visibleBili = visibleW / visibleHif(imgBili < visibleBili){let newW = (imgH / visibleH) * visibleWconst bili = newW / visibleWvisibleX = Math.abs(imgW - newW) / 2 / bilivisibleY = 0visibleW = imgW * visibleH / imgH}else {visibleX = 0let newH = (imgW * visibleH) / visibleWconst bili = newH / visibleHvisibleY = Math.abs(imgH - newH) /2 / bilivisibleH = 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)}
})

生成的效果图（红色框框部分）：

图片原图：

微信小程序CanvasContext.drawImage的用法相关推荐

微信小程序开发的基本用法
微信小程序开发的基本用法 1.数组或对象的遍历 1.1.数组遍历 wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for- ...
微信小程序----图表插件示例用法（wx-charts）
微信小程序----图表插件示例用法(wx-charts) 参考链接:https://blog.csdn.net/JxufeCarol/article/details/117718321 全部图形示例链 ...
微信小程序 Canvas drawImage()绘图头像二维码安卓用户显示半透明！
微信小程序 Canvas drawImage() 图片在安卓显示为半透明我遇到的是drawImage()方法绘制头像和二维码时开发工具测试没问题真机测试则出现以下样式具体问题不太清楚,有可能 ...
java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工 ...
【微信小程序】 setData 的用法
前言调试基础库 2.12.0 开发者工具 1.03.2008270 setData 的用法 Page.prototype.setData(Object data, Function callback ...
微信小程序模板字符串的用法---模板字符串
今天在开发的过程中,别人用了ES6的用法,模板字符串的用法 div +"kkkk"+"kkkkk"比如这种的,我们完全可以用模板字符串写成 `${app.AP ...
微信小程序 wx.showToast()的用法，更换icon图标
wx.showToast({title:"成功",icon: 'success',image: '../../images/fail.png',duration: 2000,mas ...
微信小程序wx.showModal的用法（不显示“取消”按钮，修改“确定”按钮名称）
示例一:显示标题和内容,按钮默认 wx.showModal({title: '标题',content: '内容',success: function (res) {if (res.confirm) { ...
微信小程序 - 入门篇
微信小程序入门文章目录微信小程序入门全局配置 window配置微信组件微信小程序与Vue 复用性自定义Tabbar 组件的封装路由跳转网络低代码本地存储弹窗交互 weUI 全局配置 ...

微信小程序CanvasContext.drawImage的用法

微信小程序CanvasContext.drawImage的用法相关推荐

最新文章

热门文章