当前位置: 首页 > article >正文

uniapp+vue3 使用canvas,并保存图片(图片是空白的问题)

首先把其中的要点先说一下
在这里插入图片描述

uni.createCanvasContext(canvasId, componentInstance)

当我们没有使用自定义组件时, 参数 componentInstance 可以不传
但如果我们的 canvas 是放在自定义组件中, 在vue2中一般传的是 this , 在vue3中是没有this的, 当我们在 vue3中要使用 this的时候, 我们一般会使用 getCurrentInstance()
在这里插入图片描述
在这里插入图片描述
如果我们不是使用的自定义组件

<template>
  <view>
    <canvas canvas-id="myCanvas" id="myCanvas" class="myCanvas"></canvas>
  </view>
  <button @click="chooseImage">选择图片</button>
</template>

ctx = uni.createCanvasContext("myCanvas");

第二个参数不传就可以了

CanvasContext.draw(reserve,callback)

在这里插入图片描述
在这里我们看到 ctx.draw() 是有两个参数的,其中我们要特别注意 第二个参数 callback, 当我们 使用 uni.canvasToTempFilePath 的时候, 最好是要在 callback中使用,不然, 有可能,我们得到的图片是一个空白

uni.canvasToTempFilePath(object, componentInstance)

在这里插入图片描述
在这里插入图片描述
注意, canvasToTempFilePath 在小程序或app中返回的是url 但是在 H5中返回的是一个base64的图片数据


http://www.kler.cn/a/306655.html

相关文章:

  • Springboot整合Prometheus+grafana实现系统监控
  • Linux入门:环境变量与进程地址空间
  • 智慧仓储物流可视化平台
  • ROM修改进阶教程------安卓14 安卓15去除app签名验证的几种操作步骤 详细图文解析
  • Selenium+Pytest自动化测试框架 ------ 禅道实战
  • 【Python无敌】在 QGIS 中使用 Python
  • PMP–一、二、三模–分类–14.敏捷–技巧–项目生命周期
  • LINUX网络编程:http
  • HSmartWindowControl 滚轮缩放 交互式绘制ROI 可修改 存储
  • 初写MySQL四张表:(2/4)
  • 切换淘宝最新npm镜像源
  • Android应用性能优化
  • 抚琴成一快-音程和度数
  • 证券api接口,一个开源Python量化交易平台项目需要考虑哪些方面
  • [JVM]JVM内存划分, 类加载过程, 双亲委派模型,垃圾回收机制
  • 学习笔记JVM篇(一)
  • C语言中的信号量应用
  • 【ArcGIS Pro实操第七期】栅格数据合并、裁剪及统计:以全球不透水面积为例
  • Linux03
  • 使用 Nmap 进行 SSL/TLS 加密套件枚举
  • 什么是上拉,下拉?
  • STM32G070 CubeMX配置多通道/单通道ADC+DMA流程 LL库
  • Unity 粒子系统参数说明
  • cross-plateform 跨平台应用程序-09-phonegap/Apache Cordova 介绍
  • 0911(绘制事件,qt中的网络通信)
  • Introduction to LLMs in Python