微信小程序canvas画布绘制base64图片并保存图片到相册中
WXML部分:
<view class="img_" style="width: 100%;"><canvas type="2d" id="canvasId" style="width: 100%;height: 100%" ></canvas> <button style="margin: auto;width: 70%;margin-top: 10px;" bindtap="saves">保存图片</button></view>
样式可以根据自己需求自行调整
canvas绘制成图片部分:
//写在接口成功回调中
const fs = wx.getFileSystemManager();var codeimg = wx.env.USER_DATA_PATH + '/' + '.jpg';fs.writeFile({filePath: codeimg,data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)encoding: 'base64',success: () => {// console.log(codeimg);wx.createSelectorQuery().select('#canvasId').fields({node: true,size: true}).exec((res) => {console.log(res);let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文 let canvas = res[0].node;const bg = canvas.createImage();//背景图片,可以不进行设置const image = canvas.createImage();// 图片高清化const dpr = wx.getSystemInfoSync().pixelRatio;res[0].node.width = res[0].node.width * dpr;res[0].node.height = res[0].node.height * dpr;// 设置背景图片srcimage.src = 'https://pic.imgdb.cn/item/647d31011ddac507cc160e75.jpg'bg.src = codeimg;image.onload = function () {ctx.drawImage(image, 0, 0, 900, 440)ctx.drawImage(bg, 240, 210, 430, 160);}// 将图片保存需要的实例,不写保存可以删除that.setData({ctx:canvas})})
这就将图片绘制出来了。
图片保存功能:
首先获取用户相册权限。
// 检查用户是否已经授权wx.getSetting({success: (res) => {if (!res.authSetting['scope.writePhotosAlbum']) {// 如果用户未授权,则向用户请求授权wx.authorize({scope: 'scope.writePhotosAlbum',success: () => {console.log('授权成功')},fail: () => {console.log('授权失败')}})} else {console.log('已经授权')}}})
保存功能:
// 保存图片saves() {let _this = this;wx.canvasToTempFilePath({// 把画布转化成临时文件x: 0,y: 0,width: 380, // 截取的画布的宽height: 600, // 截取的画布的高destWidth: 380, // 保存成的画布宽度destHeight: 600, // 保存成的画布高度fileType: 'jpg', // 保存成的文件类型quality: 1, // 图片质量//如果图片不是2D的话,就需要使用canvasId属性,详情请查看微信小程序官方文档canvas:_this.data.ctx, // 画布实例success(res) { // 2-保存图片至相册wx.saveImageToPhotosAlbum({// 存成图片至手机filePath: res.tempFilePath,success(res2) {wx.hideLoading();wx.showToast({title: '保存成功',duration: 2000});},fail(res3) {if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {wx.showToast({title: '保存失败,稍后再试',duration: 2000,icon: 'none'});wx.hideLoading();} else {wx.showToast({title: '保存失败,稍后再试',duration: 2000,icon: 'none'});wx.hideLoading();}}});},fail(err) {console.log(err);wx.showToast({title: '保存失败,稍后再试',duration: 2000,icon: 'none'});wx.hideLoading();}});}
相关文章:
微信小程序canvas画布绘制base64图片并保存图片到相册中
WXML部分: <view class"img_" style"width: 100%;"><canvas type"2d" id"canvasId" style"width: 100%;height: 100%" ></canvas> <button style"margin: auto;width: 70%;marg…...
Hadoop3教程(八):MapReduce中的序列化概述
文章目录 (79)MR序列化概述(80)自定义序列化步骤(81)序列化案例需求分析(82)序列化案例代码参考文献 (79)MR序列化概述 什么是序列化,什么是反序…...
Flash-Attention
这是一篇硬核的优化Transformer的工作。众所周知,Transformer模型的计算量和储存复杂度是 O ( N 2 ) O(N^2) O(N2) 。尽管先前有了大量的优化工作,比如LongFormer、Sparse Transformer、Reformer等等,一定程度上减轻了Transformer的资源消耗…...
发布npm包质量分测试
查询质量分接口 https://registry.npmjs.org/-/v1/search?textcanvas-plus v0.0.1 quality 0.2987 新建文件夹 canvas-plus 执行命令 npm init 生成package.json {"name": "3r/canvas-plus","version": "0.0.1","descript…...
基于适应度相关优化的BP神经网络(分类应用) - 附代码
基于适应度相关优化的BP神经网络(分类应用) - 附代码 文章目录 基于适应度相关优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.适应度相关优化BP神经网络3.1 BP神经网络参数设置3.2 适应度相关算法应用 4…...
复杂网络 | 利用复杂网络预测城市空间流量
文章目录 效果一览文章概述导入必要的包读取时间序列数据,并使用日期做索引将时间序列进行可视化展示取一年的数据进行分析将数据分布进行可视化展示画移动平均图n 代表滑动窗口的大小向前差分法去趋势化线性回归方法去趋势化拟合模型的线性趋势将拟合得到趋势进行可视化detren…...
【1】c++11新特性(稳定性和兼容性)—>原始字面量
在C11中添加了定义原始字符串的字面量,定义方式为:R “xxx(原始字符串)xxx”其中()两边的字符串可以省略。原始字面量R可以直接表示字符串的实际含义,而不需要额外对字符串做转义或连接等操作。 编程过程中,…...
学习pytorch13 神经网络-搭建小实战Sequential的使用
神经网络-搭建小实战&Sequential的使用 官网模型结构根据模型结构和数据的输入shape,计算用在模型中的超参数coderunning log网络结构可视化 B站小土堆pytorch视频学习 官网 https://pytorch.org/docs/stable/generated/torch.nn.Sequential.html#torch.nn.Se…...
TCP发送接口(如send(),write()等)的返回值与成功发送到接收端的数据量无直接关系
1. TCP发送接口:send() TCP发送数据的接口有send,write,sendmsg。在系统内核中这些函数有一个统一的入口,即sock_sendmsg()。由于TCP是可靠传输,所以对TCP的发送接口很容易产生误解,比如sn send(...); 错误…...
【Python、Qt】使用QItemDelegate实现单元格的富文本显示+复选框功能
主打一个 折磨 坑多 陪伴。代码为Python,C的就自己逐条语句慢慢改吧。 Python代码: import sys from types import MethodType from PyQt5.QtCore import Qt,QPoint,QSize,QRect,QEvent from PyQt5.QtGui import QStandardItemModel, QStandardItem,QTe…...
【JVM】JVM类加载机制
JVM类加载机制 加载双亲委派模型 验证准备解析初始化 JVM的类加载机制,就是把类,从硬盘加载到内存中 Java程序,最开始是一个Java文件,编译成.class文件,运行Java程序,JVM就会读取.class文件,把文件的内容,放到内存中,并且构造成.class类对象 加载 这里的加载是整个类加载的一…...
【面试经典150 | 区间】汇总区间
文章目录 Tag题目来源题目解读解题思路方法一:一次遍历复杂度分析 其他语言python3C 写在最后 Tag 【一次遍历】【数组】【字符串】 题目来源 228. 汇总区间 题目解读 给定一个无重复的升序数组 nums,需要将这个数组按照以下规则进行汇总࿱…...
主流接口测试框架对比
公司计划系统的开展接口自动化测试,需要我这边调研一下主流的接口测试框架给后端测试(主要测试接口)的同事介绍一下每个框架的特定和使用方式。后端同事根据他们接口的特点提出一下需求,看哪个框架更适合我们。 需求 1、接口编写…...
LeetCode 150.逆波兰表达式求值
题目链接 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 题目解析 首先我们需要知道什么是逆波兰表达式,像我们平常遇到的都是中缀表达式,然而逆波兰确实后缀表达式,因此这个题目隐含的意思就是将一个后缀表达式转…...
华为---企业WLAN组网基本配置示例---AC+AP组网
ACAP组网所需的物理条件 1、无线AP---收发无线信号; 2、无线控制器(AC)---用来控制管理多个AP; 3、PoE交换机---能给AP实现网络连接和供电的交换机; 4、授权:默认AC管理的AP数量有限,买授权才能管控更多AP。 WLAN创建…...
循环结构的运用
乘法口诀起源于中国,是古代人进行乘法、除法、开方等运算的基本法则,距今已经有两千多年的历史了,如何运用现代计算机技术快速写出九九乘法表呢? 循环结构可以用来重复执行一条或者多条语句,利用循环结构可以减少源程序…...
深度强化学习第 1 章 机器学习基础
1.1线性模型 线性模型(linear models)是一类最简单的有监督机器学习模型,常被用于简单的机 器学习任务。可以将线性模型视为单层的神经网络。本节讨论线性回归、逻辑斯蒂回归(logistic regression)、 softmax 分类器等…...
第一章 STM32 CubeMX (CAN通信发送)基础篇
第一章 STM32 CubeMX (CAN通信)基础篇 文章目录 第一章 STM32 CubeMX (CAN通信)基础篇STM32中文手册简介简介stm32f1系列CAN的特点CAN连接网络示意图硬件电路CAN波特率计数 一、 STM32 CubeMX设置设置波特率工程目录结构添加CAN驱…...
原子性操作
原子性操作是指一个操作在执行过程中不会被中断,要么全部执行成功,要么全部不执行,不会出现部分执行的情况。原子性操作对于多线程并发编程至关重要,因为它可以确保多个线程之间不会出现竞态条件或数据不一致性。 在计算机科学中…...
论文阅读:Segment Any Point Cloud Sequences by Distilling Vision Foundation Models
目录 概要 Motivation 整体架构流程 技术细节 小结 论文地址:[2306.09347] Segment Any Point Cloud Sequences by Distilling Vision Foundation Models (arxiv.org) 代码地址:GitHub - youquanl/Segment-Any-Point-Cloud: [NeurIPS23 Spotlight]…...
英飞凌IPOSIM在线仿真平台保姆级入门:从注册到生成第一份功率损耗报告
英飞凌IPOSIM在线仿真平台零基础实战指南:三步完成功率模块热评估 在电力电子设计领域,精确的功率损耗计算往往决定着系统可靠性。我曾见过一个光伏逆变器项目因热设计失误导致批量返修,仅仅因为工程师低估了IGBT模块在高温环境下的导通损耗。…...
雀魂智能辅助:从零构建你的AI麻将教练系统
雀魂智能辅助:从零构建你的AI麻将教练系统 【免费下载链接】Akagi A helper client for Majsoul 项目地址: https://gitcode.com/gh_mirrors/ak/Akagi 想在雀魂对局中获得实时AI分析与策略指导?雀魂智能辅助系统通过深度学习技术,为玩…...
Anthropic提示工程教程:从入门到精通的完整指南
Anthropic提示工程教程:从入门到精通的完整指南 【免费下载链接】prompt-eng-interactive-tutorial Anthropics Interactive Prompt Engineering Tutorial 项目地址: https://gitcode.com/GitHub_Trending/pr/prompt-eng-interactive-tutorial Anthropic的交…...
Vue项目里用Frappe-Gantt 0.6.1做项目管理甘特图,我踩过的坑都在这了
Vue项目中集成Frappe-Gantt的避坑指南与工程化实践 在最近的一个敏捷开发项目中,我们需要为产品团队提供一个直观的任务进度管理工具。经过几轮技术选型,最终选择了Frappe-Gantt 0.6.1作为基础组件。这个选择并非一帆风顺——从最初的简单集成到最终形成…...
解锁音乐格式终极指南:一键解决加密音频播放难题
解锁音乐格式终极指南:一键解决加密音频播放难题 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库: 1. https://github.com/unlock-music/unlock-music ;2. https://git.unlock-music.dev/um/web 项目地址: https://gi…...
ESP32烧录全攻略:从命令行到GUI工具,新手也能轻松搞定
ESP32烧录全攻略:从命令行到GUI工具,新手也能轻松搞定 第一次接触ESP32开发板时,那块小小的芯片里蕴藏着无限可能,但如何将自己的代码"装进"这个硬件大脑却成了拦路虎。记得我最初尝试烧录时,面对各种专业术…...
ApiPost实战指南:从接口创建到自动化测试的全流程解析
1. 从零开始创建你的第一个API接口 作为一个常年和API打交道的开发者,我深知新手第一次接触接口工具时的迷茫。ApiPost作为一款国产的API开发工具,用起来确实比Postman更顺手,特别是对中文用户特别友好。下面我就带你一步步创建第一个接口&am…...
2026搜索量暴涨!这几款配音软件火到刷屏
如果你最近刷短视频,一定注意到了——声音比画面更抓人。从悬疑解说的低沉旁白,到小说推文的多角色演绎,再到带货视频的情绪播报,一条爆款视频的背后,往往藏着一款好用的配音软件。2026年,AI配音市场迎来爆…...
一本计算机专业,准大一,有什么忠告?
你现在大概处于一种很特别的状态。高考刚结束不久,录取通知书拿到了,专业是计算机。可能是你自己选的,也可能是家里建议的,也可能是分数刚好够就填了。不管哪种,你现在对”计算机专业到底学什么”的理解大概率是模糊的…...
微信无法登录时的恢复操作
本文记录 OpenClaw 中 openclaw-weixin 插件在登录态丢失、微信链接不可用、扫码登录失败时的恢复流程。2026-03-23 版本 OpenClaw 更新后曾出现微信插件失效,但在 2026-03-24 版本中已恢复。本文目标是先判断问题类型,再选择最小影响的修复方式,避免不必要的全量重装。 一、…...
