This API is used via OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this).
Attribute | Type | Default value | Required | Description |
type | string | webgl | No | Type of created offscreen canvas |
width | number | | No | Canvas Width |
height | number | | No | Canvas Height |
compInst | Component | | No | "This" of the current component instance in the context of custom components |
Legal value | Description |
webgl | Webgl type context |
2d | 2d type context |
This API is used via CanvasContext wx.createCanvasContext(string canvasId, Object this).
canvas-id
attribute of the <canvas>
component for which the context is to be obtained.<canvas>
possessing the canvas-id within this custom component. If omitted, the search will not be conducted within any custom components.This API is used via wx.canvasToTempFilePath(Object object, Object this).
draw()
callback ensures successful image export.Attribute | Type | Default value | Required | Description |
x | number | 0 | No | Horizontal coordinate of the top left corner of the specified canvas area |
y | number | 0 | No | Vertical coordinate of the top left corner of the specified canvas area |
width | number | Canvas width - x | No | The width of the specified canvas area. |
height | number | Canvas height - y | No | The height of the specified canvas area. |
destWidth | number | Width multiplied by screen pixel density. | No | The width of the output image. |
destHeight | number | Height multiplied by screen pixel density. | No | The height of the output image. |
canvasId | string | - | Yes | Canvas identifier, canvas-id passed into the <canvas> component. |
fileType | string | png | No | Type of the target file. |
quality | number | - | Yes | The quality of the image, currently only effective for jpg. The value range is (0, 1]. If not within the range, it is treated as 1.0. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Value | Description |
jpg | JPG image |
png | PNG image |
Attribute | Type | Description |
tempFilePath | string | Temporary path to the generated file (local path) |
wx.canvasToTempFilePath({x: 100,y: 200,width: 50,height: 50,destWidth: 100,destHeight: 100,canvasId: 'myCanvas',success(res) {console.log(res.tempFilePath)}})
This API is used via wx.canvasPutImageData(Object object, Object this).
canvas
component in the component.Attribute | Type | Default value | Required | Description |
canvasId | string | - | Yes | Canvas identifier, the attribute of the canvas-id passed into the <canvas> component. |
data | Uint8ClampedArray | - | Yes | Image pixel data, a one-dimensional array, with every four items representing the RGBA of a pixel. |
x | number | - | Yes | The position offset of the source image data in the target canvas (offset in the x-axis direction). |
y | number | - | Yes | The position offset of the source image data in the target canvas (offset in the y-axis direction). |
width | number | - | Yes | The width of the source image data's rectangular area. |
height | number | - | Yes | The height of the source image data's rectangular area. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
<canvas>
component.const data = new Uint8ClampedArray([255, 0, 0, 1])wx.canvasPutImageData({canvasId: 'myCanvas',x: 0,y: 0,width: 1,data,success(res) {}})
This API is used via wx.canvasGetImageData(Object object, Object this).
Attribute | Type | Default value | Required | Description |
canvasId | string | - | Yes | Canvas identifier, the attribute of the canvas-id passed into the component <canvas> . |
x | number | - | Yes | The horizontal coordinate of the top-left corner of the rectangular area of the image data to be extracted. |
y | number | - | Yes | The vertical coordinate of the top-left corner of the rectangular area of the image data to be extracted. |
width | number | - | Yes | The width of the top-left corner of the rectangular area of the image data to be extracted. |
height | number | - | Yes | The height of the top-left corner of the rectangular area of the image data to be extracted. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Attribute | Type | Description |
width | number | The width of the image data rectangle. |
height | number | The height of the source image data rectangle. |
data | Uint8ClampedArray | Image pixel data, a one-dimensional array, with every four items representing the RGBA of a pixel. |
<canvas>
component within.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}})
Attribute | Type | Description |
src | string | The URL of the image |
width | number | The actual width of the image |
height | number | The actual height of the image |
referrerPolicy | string | origin: Sends the complete referrer; no-referrer: Not to send. The format is fixed as https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of the mini program, {version} is the version number of the mini program. A version number of 0 indicates a development version, trial version, or review version. A version number of devtools indicates a developer tool, and the rest are official versions. |
onload | function | Callback function triggered upon the completion of image loading |
onerror | function | Callback function triggered when an error occurs during image loading |
Attribute | Type | Description |
width | number | Describe the actual width of ImageData using pixels. |
height | number | Describe the actual height of ImageData using pixels. |
data | Uint8ClampedArray | A one-dimension array containing data in RGBA order, represented by integers ranging from 0 to 255 (inclusive). |
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()
Was this page helpful?