微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

  最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了。

  这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。(详情 看文档

  这里先来分析一下这句话:导出当前画布指定区域的内容并生成图片 。这里以画一个矩形并将该矩形保存到本地相册为例。

  首先我们要做的是先在画布上画一个矩形,其次是利用 wx.canvasToTempFilePath()方法导出画布指定区域的内容,这里当然就是要保存这个矩形了,根据该方法返回的文件路径,然后可以使用wx.saveImageToPhotosAlbum()方法将图片保存到本地相册了。

  思路清晰了,现在可以着手实现了。

  index.wxml中画布代码如下:

<button type="primary" bindtap="save">保存当前绘图</button>
<canvas canvas-id="myCanvas" style="border: 1px solid" />

  

  画矩形代码如下(该代码放在save方法中):

const ctx = wx.createCanvasContext(‘myCanvas‘)
ctx.setFillStyle(‘red‘)
ctx.fillRect(20, 20, 150, 100)
ctx.draw()

  

  此时点击按钮调用save方法,出现的效果如下:

      

  

  现在要做的就是将这个红色矩形导出来并存放到本地相册。根据文档的提示:需要在 draw 回调里调用wx.canvasToTempFilePath()方法才能保证图片导出成功

  那么以上代码可以修改为这样(此部分代码存放在draw方法里):

wx.canvasToTempFilePath({
    x: 20,
    y: 20,
    width: 150,
    height: 100,
    destWidth: 150,
    destHeight: 100,
    canvasId: ‘myCanvas‘,
    success: function (res) {
        console.log(res.tempFilePath)  // 返回图片路径
    }
})

  

  这样就完了吗?并没有,上面只是导出了矩形并返回了图片路径而没有将图片存放到本地,要实现这一点,还需要调用wx.saveImageToPhotosAlbum()方法,根据返回的路径来保存该图片到本地。

  那么以上代码又可以更改为(此部分代码存放在draw方法里):

wx.canvasToTempFilePath({
        x: 20,
        y: 20,
        width: 150,
        height: 100,
        destWidth: 150,
        destHeight: 100,
        canvasId: ‘myCanvas‘,
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
          })
        }
})

  

  进行到这一步,效果基本上已经实现了,注意,是基本上,,,,这里还存在着一个小bug,那就是在第一次生成图片并保存的时候是一张相同大小但是却是透明的图片,并非是期望的红色矩形,而之后生成的就是红色的矩形图片了,只有第一次不是,这是为什么呢?仔细分析了下,可能原因是,第一次保存图片的时候,矩形可能并没有绘制完成,因而裁剪后保存的是一张相同大小但是透明的图片,于是我将上述代码稍微做了调整,给它加了一个定时器。

  

const ctx = wx.createCanvasContext(‘myCanvas‘)
    ctx.setFillStyle(‘red‘)
    ctx.fillRect(20, 20, 150, 100)
    ctx.draw(true, setTimeout(function () {
      wx.canvasToTempFilePath({
        x: 20,
        y: 20,
        width: 150,
        height: 100,
        destWidth: 150,
        destHeight: 100,
        canvasId: ‘myCanvas‘,
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
          })
        }
      })
    },100))

  好了,现在bug已经解决了,每次都能实现预期的效果了。

原文地址:https://www.cnblogs.com/jf-67/p/8527034.html

时间: 2024-10-13 15:48:06

微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)的相关文章

微信小程序地图移动到指定的位置

其实很简单 控制 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="mark

移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉得是网页版应用. 有的人很鸡冻,但是--最后文章会提及具体的权限开放问题,所以,还是保持一颗冷静的?比较好. 那我们先来看看组件和API开放了哪些服务: 视图容器:视图(View).滚动视图.Swiper 基础内容:图标.文本.进度条 表单组件:按钮.表单等等 操作反馈 导航 媒体组建:音频.图片.

微信小程序实例教程(一)

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序开发教程

9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样将一个「服务号」改造成为「小程序」?相信很多技术人员开始关注,会不会取代APP开发,一些职位会不会被取代. 现在带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序开发简易教程

本文档将带你一步步创建完成一个微信小程序www . qixoo.com,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 注意:如果要以非管理

微信小程序(应用号)开发教程

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码 1. 获取微信小程序的 AppID 如果你是收到邀请的开发者,我们会提供一个帐号,利用提供的帐号,登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 如果没有收到内测邀

微信小程序简易教程

1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作"绑定开发者".即在"用户身份"-"开发者"模块,绑定上需要体验该小程序的微信号.本教程默认注册帐号.体验都是使用管理员