微信小程序canvas绘图绘图完成保存图片附带代码和效果图

保存图片的页面

保存下来的图片

以上就是效果图啦，接下来就是怎么实现它了

首先定义canvas的大小，绘制图片以及文字的布局

将canvas内容生成图片并保存到相册和本地

上代码啦！！自行解析

wxml

<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view class="zan_dialog__mask" bindtap="toggleDialog"></view>
<canvas canvas-id="myCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px; '  disable-scroll='true'/><button class="shareBtn" bindtap="saveImg">保存图片</button>

wxss

canvas {width: 90%;height: 860rpx;margin: 0 auto;margin-top: 20vh;z-index: 10;
}.zan_dialog__mask {position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);z-index: 9;
}.shareBtn {width: 360rpx;height: 80rpx;font-size: 30rpx;color: #fff;background-color: #00a1a6;font-family: "微软雅黑";border-radius: 40rpx;margin-top: 60rpx;z-index: 10;}
/* 用户看到的页面 */

var api = require('../../utils/api.js');
var util = require('../../utils/util.js');
const app = getApp()
Page({/*** 页面的初始数据*/data: {nvabarData: {showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示title: '点亮城市', //导航栏 中间的标题},},/*** 生命周期函数--监听页面加载* address: "山西大学城"*/onLoad: function (options) {var that = this;var match_id = options.mat_id;var energy_num = options.energy_num;var nickname = wx.getStorageSync('nickname');//获取比赛信息var res = util.request(api.getMatchinfo, { match_id: match_id });var a = res.then(function (result) {if (result.code == 200) {that.setData({// mat_logo:result.data[0].logo,title: result.data[0].title,city: result.data[0].city,// city_logo: result.data[0].city_logo,nickname: nickname,energy_num: energy_num})// 比赛logo图网络图片处理wx.downloadFile({url: result.data[0].city_logo,success: function (res) {that.setData({mat_logo: res.tempFilePath})//调用二维码图var res = util.request(api.setqrCode, { match_id: match_id, type: 2 });var a = res.then(function (result) {wx.downloadFile({url: result.path,success: function (res) {// console.log(res);return;that.setData({eqcode_img: res.tempFilePath})that.startCanvas()}})})}})}})},startCanvas: function () {var that = this;var rpx;//获取屏幕宽度，获取自适应单位wx.getSystemInfo({success: function (res) {rpx = res.windowWidth / 375;},})const ctx = wx.createCanvasContext('myCanvas')var Username = that.data.nickname;//"狂奔的蜗牛";var biaoyu = "恭喜您";var explain = "在2022年"+that.data.title+"活动中点亮"+that.data.city+"，";var explaintwo = "为"+that.data.city+"共积攒了"+that.data.energy_num+"能量值"// 图片ctx.drawImage("../../img/sharebg.png", 0, 0, 340 * rpx, 500 * rpx)// 文本ctx.setFillStyle('#fff')//文字颜色：默认黑色ctx.setFontSize(18 * rpx)//设置字体大小，默认10ctx.fillText(Username, 20 * rpx, 30 * rpx)//绘制文本ctx.setFontSize(14 * rpx)//设置字体大小，默认10ctx.fillText(biaoyu, 120 * rpx, 30 * rpx)//绘制文本ctx.setFillStyle('#e1e1e1')ctx.fillRect(10 * rpx, 50 * rpx, 320 * rpx, 1 * rpx)ctx.setFillStyle('#fff')ctx.setFontSize(12 * rpx)ctx.fillText(explain, 20 * rpx, 75 * rpx)ctx.fillText(explaintwo, 20 * rpx, 92 * rpx)ctx.setFillStyle('#ffffff')ctx.fillRect(75 * rpx, 110 * rpx, 180 * rpx, 185 * rpx)ctx.drawImage(that.data.mat_logo, 75 * rpx, 110 * rpx, 180 * rpx, 185 * rpx)ctx.drawImage(that.data.eqcode_img, 260 * rpx, 340 * rpx, 60 * rpx, 60 * rpx)//调用draw()开始绘制ctx.draw()//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function (res) {var tempFilePath = res.tempFilePath;that.setData({loadImagePath: tempFilePath,});},fail: function (res) {console.log(res);}});}, 500);},//点击保存到相册saveImg: function () {wx.saveImageToPhotosAlbum({filePath: this.data.loadImagePath,success(res) {console.log('res', res);wx.showToast({title: '已保存到相册',icon: 'success',duration: 3000})util.redirect('pages/tree/tree');}, fail: function (err) {if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {wx.openSetting({success(settingdata) {console.log(settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showToast({title: '获取权限成功,再次点击保存图片',icon: 'none',duration: 1500})console.log('获取权限成功，给出再次点击图片保存到相册的提示。')} else {console.log('获取权限失败，给出不给权限就无法正常使用的提示')}}})}},complete(res) {wx.hideLoading()}})},})

就这样啦就这样啦，也是第一次接触canvas 大佬们有什么补充和建议留言就好哦

微信小程序canvas绘图绘图完成保存图片附带代码和效果图相关推荐

微信小程序 Canvas drawImage()绘图头像二维码安卓用户显示半透明！
微信小程序 Canvas drawImage() 图片在安卓显示为半透明我遇到的是drawImage()方法绘制头像和二维码时开发工具测试没问题真机测试则出现以下样式具体问题不太清楚,有可能 ...
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...
微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
小程序canvas 2d 绘图无法drawImage图片？
小程序canvas 2d 绘图无法drawImage图片? 微信iOS 7.0.20 版本使用canvas 2d 绘制drawImage时无法成功绘制,图片不显示,img1.onload不执行,执行 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序 | canvas为你的天气预报添加雨雪效果
在 Canvas 开发中,经常会提到粒子系统,使用粒子系统可以模拟出火.雾.云.雪等抽象视觉效果.它是HTML5新增的为页面添加多样化效果的绝佳实践. 正巧最近做的一个天气类微信小程序紧接尾声,寻思着 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序canvas实现简易手写签名版（uni-app）
微信小程序可以通过canvas实现手写签名的效果,本文中使用的是微信小程序Canvas 2D接口本示例中绘制的是横屏签名的效果,效果图如下: 这里我们需要调整canvas的物理宽高,默认物理宽高为3 ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...
canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...

微信小程序canvas绘图绘图完成保存图片附带代码和效果图

微信小程序canvas绘图绘图完成保存图片附带代码和效果图相关推荐

最新文章

热门文章

微信小程序canvas绘图 绘图完成保存图片 附带代码和效果图

微信小程序canvas绘图 绘图完成保存图片 附带代码和效果图相关推荐

最新文章

热门文章

微信小程序canvas绘图绘图完成保存图片附带代码和效果图

微信小程序canvas绘图绘图完成保存图片附带代码和效果图相关推荐