微信小程序canvas组件官方文档
canvas组件介绍
<canvas style="width: 200px;height: 200px;"
canvas-id="myCanvas"
disable-scroll="{{false}}"
bindtouchstart="startTouch"
bindtouchmove="moveTouch"
bindtouchend="endTouch"
bindtouchcancel="cancelTouch"
bindlongtap="longTap"
binderror="canvasBindError"</canvas>
官方文档中对canvas属性均有介绍，这里对于入门简要说明一下：
- canvas 为画布组件名
- style 定义画布样式 参考CSS教程 这里定义一个宽200px，高200px的画布组件
- canvas-id 设置该画布的id（可看做该画布的名字）
- disable-scroll 类型为Boolean 官方解释：当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
- 以下类型顾名思义分别为开始触碰、滑动、结束触碰动作以及触碰时被打断动作、长按动作和出现错误时属性
压缩图片
<!-- wxml中内容 -->
<canvas class="myFanvas" style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>
<button bindtap='chooseImage'>选择图片绘制到屏幕</button>
//js中data
data:{
imageW:[],//用于存放选中图片的宽
imageH:[],//用于存放选中图片的高
}
//js文件内容
chooseImage:function(){
var that = this
//选择图片
wx.chooseImage({
count:1,//只可选一张图，最高可为9
success: function(res) {
wx.getImageInfo({
src: res.tempFilePaths,
success(res){
that.data.imageW.push(res.width)//将图片宽放入data中
that.data.imageH.push(res.height)//将图片高放入data中
}
})
const ctx = wx.createCanvasContext("myCanvas")//创建画布上下文
ctx.drawImage(res.tempFilePaths[0], 0, 0, that.data.imageW[0], that.data.imageH[0],0,0,200,200)//描述图片到画布上
ctx.draw()//绘制画布
}
})
}
上述代码简介
1.首先在wxml文件中添加一个canvas-id="myCanvas"的画布组件和一个button，点击该button触发js中chooseImage函数
2.wx.chooseImage()为微信原生API，用于选择手机中的photos或者使用相机拍照
3.在wx.chooseImage()中success（图片选择成功后的回调函数），创建CanvasContext实例ctx
4.使用ctx.drawImage()将第一张图片描述到id为myCanvas的canvas组件，请注意描述的内容并不能显示到canvas上
5.这里res.tempFilePaths[0].width和res.tempFilePaths[0].height为所选图片的宽高，而200,200为绘制到canvas上的宽高
6.使用ctx.draw()将上述中的所有描述内容绘制到画布上
//js续
showImage:function(){
var that = this
wx.canvasToTempFilePath({
x:0,
y:0,
width: 200,
height: 200,
destWidth:100,
destHeight:100,
canvasId: "myCanvas",
quality: 1,
success(res) {
that.setData({
imgFilePath: res.tempFilePath
})
}
})
}
<!-- wxml中内容 -->
<image style='width: 200px; height: 200px;' src="{{imgFilePath}}" ></image>
上述代码简介
1.使用wx.canvasToTempFilePath()将画布中的内容导出为图片，并将该图片的临时地址写入data中
2.wx.canvasToTempFilePath()中x、y为所截取图片左上角在canvas上的位置，width、height为图片右下角在canvas上的位置，destWidth、destHeight为输出图片的宽高，上述所有变量赋值单位均为px
3.可以在wxml中添加一个view组件显示该图
将压缩后的图片存入手机
//js续
saveImage:function(){
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imgFilePath,
success:function(){
console.log("保存成功")
}
})
}
上述代码简介
1.添加一个函数用于存放图片到系统相册
2.使用wx.saveImageToPhotosAlbum()保存图片，其中filePath为该图片临时路径
总结
1.在canvas中创建一个canvas组件，不在页面上显示该组件思路：将该组件放在wxml最下方，在将该组件向右移出屏幕范围
示例
.myFanvas{
position: fixed;
left: 1110rpx
}
2.使用wx.chooseImage()选择系统照片或调用相机拍照
3.使用 wx.createCanvasContext()、ctx.drawImage()、draw()将图片写入canvas中
4.使用wx.canvasToTempFilePath()将canvas中内容导出为图片，默认格式png，也可使用fileType:"jpg"将格式改为jpg，现只支持两种；已压缩完成
5.使用wx.saveImageToPhotosAlbum()将导出的图片存入系统相册
网友评论