小程序画布生成图片wx.canvasToTempFilePath

wx.canvasToTempFilePath(Object object, Object this)

把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

以 Promise 风格 调用:支持
小程序插件:支持,需要小程序基础库版本不低于 1.9.6
微信 Mac 版:支持

参数

Object object

属性 类型 默认值 必填 说明 最低版本
x number 0 指定的画布区域的左上角横坐标 1.2.0
y number 0 指定的画布区域的左上角纵坐标 1.2.0
width number canvas宽度-x 指定的画布区域的宽度 1.2.0
height number canvas高度-y 指定的画布区域的高度 1.2.0
destWidth number width*屏幕像素密度 输出的图片的宽度 1.2.0
destHeight number height*屏幕像素密度 输出的图片的高度 1.2.0
canvasId string 画布标识,传入 canvas 组件的 canvas-id
canvas Object 画布标识,传入 canvas 组件实例 (canvas type="2d" 时使用该属性)。
fileType string png 目标文件的类型 1.7.0
合法值 说明
jpg jpg 图片
png png 图片
quality number 图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。 1.7.0
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数
Object res
属性 类型 说明
tempFilePath string 生成文件的临时路径 (本地路径)

Object this

在自定义组件下,当前组件实例的this,以操作组件内 canvas 组件

示例代码

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})

分类小程序画布功能相关推荐:

小程序画布创建离屏 canvas 实例wx.createOffscreenCanvas 小程序创建 canvas 的绘图上下文 CanvasContext 对象wx.createCanvasContext 小程序画布生成图片wx.canvasToTempFilePath 小程序将像素数据绘制到画布wx.canvasPutImageData 小程序获取 canvas 区域隐含的像素数据wx.canvasGetImageData 小程序Canvas的使用方法 小程序画布返回 Canvas 的绘图上下文Canvas.getContext 小程序画布创建一个图片对象Canvas.createImage 小程序画布重绘Canvas.requestAnimationFrame 小程序取消由 requestAnimationFrame 添加到计划中的动画帧请求Canvas.cancelAnimationFrame 小程序画布创建一个 ImageData 对象Canvas.createImageData 小程序画布创建 Path2D 对象Canvas.createPath2D 小程序画布犯创建图片展示的 data URI Canvas.toDataURL 小程序canvas 组件的绘图上下文CanvasContext 小程序画布draw用法CanvasContext.draw 小程序画布创建一个线性的渐变颜色CanvasContext.createLinearGradient 小程序创建一个圆形的渐变颜色CanvasContext.createCircularGradient 小程序画布对指定的图像创建模式的方法CanvasContext.createPattern 小程序画布测量文本尺寸信息CanvasContext.measureText 小程序画布保存绘图上下文CanvasContext.save 小程序画布恢复之前保存的绘图上下文 小程序画布开始创建一个路径CanvasContext.beginPath 小程序把路径移动到画布中的指定点CanvasContext.moveTo 小程序画布增加一个新点CanvasContext.lineTo 小程序画布创建二次贝塞尔曲线路径CanvasContext.quadraticCurveTo 小程序创建三次方贝塞尔曲线路径CanvasContext.bezierCurveTo 小程序画布创建一条弧线CanvasContext.arc 小程序创建一个矩形路径CanvasContext.rect 小程序画布根据控制点和半径绘制圆弧路径CanvasContext.arcTo 小程序画布裁剪任意形状和尺寸CanvasContext.clip 小程序画布填充一个矩形CanvasContext.fillRect 小程序画布画一个非填充矩形CanvasContext.strokeRect 小程序画布清除画布上矩形区域内的内容CanvasContext.clearRect 小程序画布对路径中的内容进行填充CanvasContext.fill 小程序画布画出当前路径的边框CanvasContext.stroke 小程序画布关闭一个路径CanvasContext.closePath 小程序画布路径缩放CanvasContext.scale 小程序画布旋转 小程序画布变化画布圆点位置 小程序画布绘制图像到画布CanvasContext.drawImage 小程序画布绘制文本描边 小程序使用矩阵多次叠加当前变换的方法CanvasContext.transform 小程序使用矩阵设置当前变换的方法CanvasContext.setTransform 小程序画布设置填充色CanvasContext.setFillStyle 小程序画布设置描边颜色CanvasContext.setStrokeStyle 小程序画布设定阴影样式CanvasContext.setShadow 小程序画布设置全局画笔透明度CanvasContext.setGlobalAlpha 小程序画笔设置线条的宽度CanvasContext.setLineWidth 小程序画布设置线条的交点样式CanvasContext.setLineJoin 小程序画布设置线条的端点样式CanvasContext.setLineCap 小程序画笔设置虚线样式CanvasContext.setLineDash 小程序画布设置最大斜接长度CanvasContext.setMiterLimit 小程序画布在画布上绘制文本CanvasContext.fillText 小程序画布设置字体大小 小程序画布设置文字的对齐方式CanvasContext.setTextAlign 小程序画布设置文字的竖直对齐 小程序画布渐变对象CanvasGradient 小程序画布添加颜色的渐变点CanvasGradient.addColorStop 小程序画布颜色Color 小程序画布图片对象Image 小程序画布ImageData 对象 小程序画布离屏 canvas 实例OffscreenCanvas 小程序画布创建一个图片对象OffscreenCanvas.createImage 小程序画布获取OffscreenCanvas 的绘图上下文OffscreenCanvas.getContext 小程序画布Path2D 小程序画布Canvas 绘图上下文RenderingContext