当前位置: 首页 > 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/news/306655.html

相关文章:

  • 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
  • 细说STM32单片机使用通用定时器生成固定占空比和可变占空比PWM波的方法
  • leetcode 230.二叉搜索树中第k小的元素
  • VMware Fusion虚拟机Mac版 安装Ubuntu操作系统教程
  • YOLOv8目标检测——迁移学习
  • 55页可编辑PPT | 集团制造企业数字化转型顶层设计方案
  • k8s中的认证授权
  • LeetCode双周赛139
  • 鸿蒙开发入门day19-使用NDK接口构建UI(一)
  • 中间件之RocketMQ
  • react js 使用 useEffect 钩子