该 API 使用方法为 OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)
属性 | 类型 | 默认值 | 必填 | 说明 |
type | string | webgl | 否 | 创建的离屏 canvas 类型 |
width | number | | 否 | 画布宽度 |
height | number | | 否 | 画布高度 |
compInst | Component | | 否 | 在自定义组件下,当前组件实例的 this |
合法值 | 说明 |
webgl | webgl类型上下文 |
2d | 2d类型上下文 |
该 API 使用方法为 CanvasContext wx.createCanvasContext(string canvasId, Object this)
<canvas>
组件 canvas-id
属性。<canvas>
,如果省略,则不在任何自定义组件内查找。该 API 使用方法为 wx.canvasToTempFilePath(Object object, Object this)
draw()
回调里调用该方法才能保证图片导出成功。属性 | 类型 | 默认值 | 必填 | 说明 |
x | number | 0 | 否 | 指定的画布区域的左上角横坐标 |
y | number | 0 | 否 | 指定的画布区域的左上角纵坐标 |
width | number | canvas宽度-x | 否 | 指定的画布区域的宽度 |
height | number | canvas高度-y | 否 | 指定的画布区域的高度 |
destWidth | number | width*屏幕像素密度 | 否 | 输出的图片的宽度 |
destHeight | number | height*屏幕像素密度 | 否 | 输出的图片的高度 |
canvasId | string | - | 是 | 画布标识,传入 <canvas> 组件的 canvas-id |
fileType | string | png | 否 | 目标文件的类型 |
quality | number | - | 是 | 图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作1.0 处理。 |
success | function | - | 否 | 接口调用成功的回调函数 |
fail | function | - | 否 | 接口调用失败的回调函数 |
complete | function | - | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
值 | 说明 |
jpg | jpg 图片 |
png | png 图片 |
属性 | 类型 | 说明 |
tempFilePath | string | 生成文件的临时路径 (本地路径) |
wx.canvasToTempFilePath({x: 100,y: 200,width: 50,height: 50,destWidth: 100,destHeight: 100,canvasId: 'myCanvas',success(res) {console.log(res.tempFilePath)}})
该 API 使用方法为 wx.canvasPutImageData(Object object, Object this)
canvas
组件。属性 | 类型 | 默认值 | 必填 | 说明 |
canvasId | string | - | 是 | 画布标识,传入 <canvas> 组件的 canvas-id 属性 |
data | Uint8ClampedArray | - | 是 | 图像像素点数据,一维数组,每四项表示一个像素点的 rgba |
x | number | - | 是 | 源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量) |
y | number | - | 是 | 源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量) |
width | number | - | 是 | 源图像数据矩形区域的宽度 |
height | number | - | 是 | 源图像数据矩形区域的高度 |
success | function | - | 否 | 接口调用成功的回调函数 |
fail | function | - | 否 | 接口调用失败的回调函数 |
complete | function | - | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
<canvas>
组件。const data = new Uint8ClampedArray([255, 0, 0, 1])wx.canvasPutImageData({canvasId: 'myCanvas',x: 0,y: 0,width: 1,data,success(res) {}})
该 API 使用方法为 wx.canvasGetImageData(Object object, Object this)
属性 | 类型 | 默认值 | 必填 | 说明 |
canvasId | string | - | 是 | 画布标识,传入 <canvas> 组件的canvas-id 属性 |
x | number | - | 是 | 将要被提取的图像数据矩形区域的左上角横坐标 |
y | number | - | 是 | 将要被提取的图像数据矩形区域的左上角纵坐标 |
width | number | - | 是 | 将要被提取的图像数据矩形区域的宽度 |
height | number | - | 是 | 将要被提取的图像数据矩形区域的高度 |
success | function | - | 否 | 接口调用成功的回调函数 |
fail | function | - | 否 | 接口调用失败的回调函数 |
complete | function | - | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
属性 | 类型 | 说明 |
width | number | 图像数据矩形的宽度 |
height | number | 图像数据矩形的高度 |
data | Uint8ClampedArray | 图像像素点数据,一维数组,每四项表示一个像素点的 rgba |
<canvas>
组件。wx.canvasGetImageData({canvasId: 'myCanvas',x: 0,y: 0,width: 100,height: 100,success(res) {console.log(res.width) // 100console.log(res.height) // 100console.log(res.data instanceof Uint8ClampedArray) // trueconsole.log(res.data.length) // 100 * 100 * 4}})
属性 | 类型 | 说明 |
src | string | 图片的 URL |
width | number | 图片的真实宽度 |
height | number | 图片的真实高度 |
referrerPolicy | string | origin:发送完整的referrer;no-referrer:不发送。格式固定为
https://servicewechat.com/{appid}/{version}/page-frame.html
,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本; |
onload | function | 图片加载完成后触发的回调函数 |
onerror | function | 图片加载发生错误后触发的回调函数 |
属性 | 类型 | 说明 |
width | number | 使用像素描述 ImageData 的实际宽度 |
height | number | 使用像素描述 ImageData 的实际高度 |
data | Uint8ClampedArray | 一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示 |
const ctx = wx.createCanvasContext('myCanvas')// Create circular gradientconst grd = ctx.createLinearGradient(30, 10, 120, 10)grd.addColorStop(0, 'red')grd.addColorStop(0.16, 'orange')grd.addColorStop(0.33, 'yellow')grd.addColorStop(0.5, 'green')grd.addColorStop(0.66, 'cyan')grd.addColorStop(0.83, 'blue')grd.addColorStop(1, 'purple')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()
本页内容是否解决了您的问题?