小程序利用canvas实现一键保存图片功能

最新推荐文章于 2024-09-14 16:14:53 发布
最新推荐文章于 2024-09-14 16:14:53 发布
阅读量7.7k 收藏 11
点赞数 3
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Charles_Tian/article/details/80910616
版权

在同一个项目（项目归类于学习类，类似答题那种）开发中，又有了一个新的应用需求（上一个应用需求可查看链接：https://blog.csdn.net/Charles_Tian/article/details/80908442），就是要在用户答题结束之后，将用户答题的相关信息展示到一个“奖状”上去，然后将奖状和用户答题信息可通过用户点击一键保存事件，一起保存在用户的手机相册中。

这里我先给出最后的效果图，然后再细讲怎么去实现，以及过程中的一些问题。我的效果图是这样的，用户进入这个界面后，会先展示给用户看其自己的奖状信息，下面一个按钮是生成预览图的，点击保存才会保存在用户相册中。

最终效果图：



于是，这又让我想到了用canvas去实现，因为小程序官网平台有一个api接口：wx.saveImageToPhotosAlbum(OBJECT)。

下面来看看关于这个接口的一些属性：

/*
wx.canvasToTempFilePath(OBJECT, this)
x            Number    否 画布x轴起点（默认0） 
y            Number    否 画布y轴起点（默认0） 
width        Number    否 画布宽度（默认为canvas宽度-x）
height       Number    否 画布高度（默认为canvas高度-y）
destWidth    Number    否 输出图片宽度（默认为 width * 屏幕像素密度）
destHeight   Number    否 输出图片高度（默认为 height * 屏幕像素密度） 
canvasId     String    是 画布标识，传入 <canvas/> 的 canvas-id
fileType     String    否 目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png' 
quality      Number    否 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理  
success      Function  否 接口调用成功的回调函数
fail         Function  否 接口调用失败的回调函数
complete     Function  否 接口调用结束的回调函数（调用成功、失败都会执行）
*/

这个接口主要是将想要保存的内容（其实也就是一张图片，这个图片里面包含你想要生成的一些信息）生成一个暂存的路径，随后再利用接口：wx.saveImageToPhotosAlbum将这个暂存的路径保存在用户的手机相册中。

但利用wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum这两个接口之前，还需要创建并返回绘图上下文context对象

即：const ctx = wx.createCanvasContext('shareImg')

好，下面开始直接上代码：

上传之前这里需要提醒大家的就是：在JS部分中，ctx.drawImg这个方法有点特别，就是它所带的照片位置属性不接受层级分层，

也就是说它已经将照片分层了，第一张照片的层级最低，越往后走，后面的照片层级越高，所以，一般是要把底层背景图放在第一个。

HTML部分：

<!-- 画布大小按需定制 这里我按照背景图尺寸的一半定的  -->
<canvas canvas-id="shareImg" style="width:375px;height:606px"></canvas>
  
<!-- 预览区域  -->
<view hidden='{{previewHidden}}' class='preview'>
  <image src='{{preurl}}' mode='widthFix' class='previewImg'></image>
  <button type='primary' bindtap='save'>保存分享图</button>
</view>

<!-- 界面展示区域 -->
<view class='originalView'>
   <image src='/images/chengjidan.png' class='chengjidan'></image> 
   <image src='/images/transcript.jpg' class='transcript'></image>
   <view class='userScoreInfo'>
     <text class='name'>姓名：我我我\n</text>
     <text class='IDCard'>身份证：xxxxxxxxxxx\n</text>
     <text class='info'>其他信息：xxxxxxxxxxx</text>
   </view>
   <image src='/images/zhang.jpg' class='seal'></image>  
</view>

<button class='share' type='primary' bindtap='share'>生成成绩单</button>

CSS部分：

canvas{
  position: fixed;
  top: 0;
  left: 400px;
}
.share{
  position: absolute;
  bottom: 100rpx;
  width: 70%;
  left: 15%;
  height: 100rpx;
  line-height: 100rpx;
}
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  position: absolute;
  z-index: 2;
}
.previewImg{
  width: 70%;
  position: absolute;
  top: 10%;
  left: 15%;
  z-index: 3;
  border: 1px dashed #fff;
}
.preview button{
  width: 40%;
  position: absolute;
  bottom: 100rpx;
  left: 30%;
}

page{
  width: 100%;
  height: 100%;
}

.originalView{
  width: 100%;
  height: 100%;
}

.chengjidan{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.transcript{
  width: 240px;
  height: 185px;
  position: absolute;
  left: 50%;
  margin-left: -120px;
  top: 100rpx;
} 

.seal{
  width: 100px;
  height: 100px;
  position: absolute;
  right: 10%;
  bottom: 200rpx;
}

.userScoreInfo{
  position: absolute;
  width: 60%;
  margin-left: 20%;
  text-align: left;
  top: 50%;
}

JS部分：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    previewHidden: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/chengjidan.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });

    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/transcript.jpg',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });

    let promise3 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/zhang.jpg',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });

    Promise.all([
      promise1, promise2, promise3
    ]).then(res => {
      console.log(res)
      const ctx = wx.createCanvasContext('shareImg')

      //主要就是计算好各个图文的位置
      ctx.drawImage('../../' + res[0].path, 0, 0, 375, 606)
      ctx.drawImage('../../' + res[1].path, 70, 100, 240, 185)
      ctx.drawImage('../../' + res[2].path, 250, 450, 90, 90)

      ctx.setTextAlign('left')
      ctx.setFillStyle('#000000')
      ctx.setFontSize(16)
      // 下面这三行是图片中的文字，这些文字也是要通过canvas画上去的
      ctx.fillText('姓    名：程程', 70, 330)
      ctx.fillText('身 份 证：xxxxxxxxxx', 70, 360)
      ctx.fillText('相关信息：xxxxxxxxxxxxxx', 70, 390)

      ctx.stroke()
      ctx.draw()
    })
  },


  /**
   * 生成分享图
  */
  share: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    /*
    wx.canvasToTempFilePath(OBJECT, this)
    x	          Number	  否	画布x轴起点（默认0）	
    y	          Number	  否	画布y轴起点（默认0）	
    width	  Number	  否	画布宽度（默认为canvas宽度-x）
    height	  Number	  否	画布高度（默认为canvas高度-y）
    destWidth	  Number	  否	输出图片宽度（默认为 width * 屏幕像素密度）
    destHeight	  Number	  否	输出图片高度（默认为 height * 屏幕像素密度）	
    canvasId	  String	  是	画布标识，传入 <canvas/> 的 canvas-id
    fileType	  String	  否	目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png'	
    quality	  Number	  否	图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理	
    success	  Function	  否	接口调用成功的回调函数
    fail	  Function	  否	接口调用失败的回调函数
    complete	  Function	  否	接口调用结束的回调函数（调用成功、失败都会执行）
    */
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 375,
      height: 606,
      destWidth: 375,
      destHeight: 606,
      canvasId: 'shareImg',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          preurl: res.tempFilePath,
          previewHidden: false,
        })
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

  /**
   * 保存到相册
  */
  save: function () {
    var that = this
    // 生产环境时 记得这里要加入获取相册授权的代码
    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              // 用户已经同意小程序相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
              that.startSaveImage()
            }
          })
        }else{
          that.startSaveImage()
        }
      }
    })

  },

  startSaveImage: function () {
    let that = this; 
    wx.saveImageToPhotosAlbum({
      filePath: that.data.preurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              that.setData({
                previewHidden: true
              })
            }
          }
        })
      }
    })
  },
})

哎，以上就是实现方法，或许有的童鞋就说，这样好麻烦啊，还要生成一个预览图，可不可以直接点击保存之后，就把奖状直接保存在用户手机中呢？答案是绝对可以的，那么下面我们就来实现点击保存按钮后直接保存的操作。直接上代码吧~

HTML部分：

<canvas canvas-id="shareImg" style="width:100%;height:100%;"></canvas>
<button type='primary' class='saveImg' bindtap='save'>保存图片</button>

CSS部分：

page{
  width: 100%;
  height: 100%;
  background: #000;
}

.saveImg{
  position: absolute;
  bottom: 10px;
  width: 90%;
  left: 5%;
  height: 50px;
}

JS部分（最重要的）

Page({

  /**
   * 页面的初始数据
   */
  data: {
    resultComment: '学霸' //测试数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    // 测试数据
    let real_name = 'xxxx';
    let id_card = '123123';
    let school_id = 666
    let winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度
    let winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度
    that.setData({
      winWidth: winWidth,
      winHeight: winHeight
    })

    //绘制canvas图
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/chengjidanBG.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/chengjidan2.jpg',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      console.log(res)
      const ctx = wx.createCanvasContext('shareImg')

      //主要就是计算好各个图文的位置，利用当前设备的宽高度对图片和文字进行居中
      ctx.drawImage('../../' + res[0].path, 0, 0, that.data.winWidth, that.data.winHeight - 70)
      ctx.drawImage('../../' + res[1].path, (that.data.winWidth / 2 - 120), 50, 240, 150)


      ctx.setTextAlign('center')
      ctx.setFillStyle('#9a8576')
      ctx.setFontSize(22)
      ctx.fillText(real_name, (that.data.winWidth) / 2, ((that.data.winHeight) / 2) - 30)

      ctx.setTextAlign('left')
      ctx.setFillStyle('#304d64')
      ctx.setFontSize(14)
      ctx.fillText('身份证号码：' + id_card, 70, ((that.data.winHeight) / 2) + 20)
      ctx.fillText('培训学校：' + school_id, 70, ((that.data.winHeight) / 2) + 50)
      ctx.fillText('成绩评定：' + that.data.resultComment, 70, ((that.data.winHeight) / 2) + 80)

      ctx.stroke()
      ctx.draw()
    })
  },

  /**
   * 保存到相册
  */
  save: function () {
    var that = this;
    //获取相册授权
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.savaImageToPhoto();
            }
          })
        }else{
          that.savaImageToPhoto();
        }
      }
    })
  },

  savaImageToPhoto: function(){
    let that = this;
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.winWidth,
      height: that.data.winHeight - 70,
      destWidth: that.data.winWidth,
      destHeight: that.data.winHeight - 70,
      canvasId: 'shareImg',
      success: function (res) {
        wx.hideLoading()
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              content: '图片已保存到相册了',
              showCancel: false,
              confirmText: '朕知道啦',
              confirmColor: '#72B9C3',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                  that.setData({
                    hidden: true
                  })
                }
              }
            })
          }
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
})

其实这个页面呈现在用户眼前的效果，就是在onLoad里面中canvas绘图出来的效果。效果图如下：



Charles_Tian
关注
专栏目录
关于微信小程序canvas保存图片
kajsbdk的博客
09-17 876
关于微信小程序canvas保存图片 参考知识：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 大家都知道，现在的版本微信已经不再更新维护wx.createCanvasContext方法了，从基础库 [2.9.0]开始，该接口停止维护，需要用Canvas更替，那么以前的版本要怎么更新替换，可能很多小伙伴会苦恼，正好最近微信了一个老项目，踩了坑，给大家分享下我的经验~ ##不同点： 老版本 <canvas can
小程序利用canvas实现一键保存图片功能（合并图片，双指缩放，旋转，默认裁剪画布大小的尺寸）
qq_26387907的博客
12-21 2548
**css ** .container { position: relative; width: 100%; height: 100%; background: #000; } .img { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); overflow: hi...
用canvas绘制微信小程序海报页面并保存相册-适用微信原生
qq_43205326的博客
01-28 6160
微信小程序如何绘制全屏海报，并保存到相册
微信小程序使用canvas画图保存图片到手机相册
最新发布
zhaoyan_love的博客
09-14 941
微信小程序使用canvas，保存图片到相册
小程序保存canvas生成的图片到本地
fang5211的博客
05-28 788
content: "未授权保存相册，请前往设置页开启“保存到相册”权限",content:"已成功为您保存图片到手机相册，请自行前往朋友圈分享",// 用户已经同意小程序使用该功能，后续不会弹窗询问。//保存成功失败之后，都要隐藏画板，否则影响界面显示。confirmText: "知道了",content: '图片绘制中，请稍后重试',title: "微信授权失败",confirmText:"知道了",title:"图片已保存",title: '提示',
微信小程序实现 用canvas 生成图片 并保存
01-24
需求：小程序获取到微信头像和昵称，生成2019年随机发生的趣事 实现：微信小程序实现 用canvas 生成图片 并保存
小程序canvas 简单配置 保存图片
Acitylion的博客
09-06 358
提示 如果图片显示不出来的话 查看一下域名是否正确 图片是否转成本地图片 <view class="poster" hidden="{{hidden}}"> <canvas canvas-id="shareCanvas" style="width:604rpx;height:940rpx"></canvas> <view class="preservation"> <view class="p_btn" b...
小程序中通过canvas生成并保存图片
不靠谱的作曲家
08-21 1540
小程序中通过canvas生成并保存图片。
【微信小程序】实现手写电子签名并保存为图片功能
weixin_44707049的博客
04-03 5625
需求概述： 微信小程序的一个功能，类似于画板，用于电子签名，要求有一键清空画板和保存功能。 实现思路： 微信开发文档中的Canvas组件 微信画布API中的 wx.createCanvasContext(string canvasId, Object this) wx.canvasToTempFilePath(Object object, Object this) CanvasContext.draw(boolean reserve, function callback) 开发文档中把上面的API的用法写的
微信小程序生成分享图然后保存图片分享朋友圈
duoduozk的博客
11-10 4909
微信小程序可以实现快速的转发好友实现分享，但是不能直接分享到朋友圈，但是有需要要这么做，要怎么实现呢？ 查看文档之后，大概有了实现思路 1.使用微信小程序的wx.createCanvasContext（）方法，绘制图片； 2.使用wx.canvasToTempFilePath(）方法，把绘制出来的页面转成微信内的图片路径； 3.使用wx.saveImageToPhotosAlbum(）方法...
微信小程序一键抠图(进阶)，抠图完成之后自定义背景合成新图并下载到本地
lily_808的博客
05-17 8722
运行效果 在之前完成抠图的基础上，再上传一张背景图，将抠图和背景图进行合成，生成新图片保存到本地 功能介绍 利用百度ai人像分隔功能生成的白底图存储到本地之后，提示用户上传一张背景图，将背景图临时路径和白底图路径通过页面跳转参数传递到一个新的页面combine里，在此页面中首先获取屏幕宽度和两张图片的宽高，根据屏幕宽度分别对两张图片进行缩放，利用canvas绘图，首先绘制背景图，然后绘制白底图，完成之后将canvas保存到临时路径中，再将临时路径中的图片存储到本地相册中。 核心代码 参数传递
小程序canvas生成海报保存到相册
02-28
通过canvas绘制的海报，获取用户授权的处理，对拒绝授权的处理，然后保存到相册
微信小程序之通过Canvas生成图片保存到手机相册
12-30
微信小程序之通过Canvas生成图片保存到手机相册
微信小程序之html5 canvas绘图并保存到系统相册
11-21
开始实现之前先上个效果图   tips 1.网络图片需先配置download域名，可通过wx.getImageInfo转为临时路径； 2.个人习惯问题，我习惯使用async-await语法，所以需要引入regenerator这个库，使用方式可网上查。 一、封装通用微信api返回为Promise对象 /datas/common.js // 封装获取微信图片信息。 export const getWxImageInfo = (imgPath) => { return new Promise((resolve, reject) => { wx.getImageInfo({
小程序二维码海报生成，图片保存本地一步到位
04-17
通过以上步骤，我们可以实现一个完整的小程序二维码海报生成功能，使用户能够一键生成并保存个性化海报。这一技术在营销推广、活动报名、商品分享等多个场景中都有广泛的应用。同时，对开发者来说，理解并掌握这些...
小程序canvas绘制图片并保存
zaoqinghuan的博客
07-06 1913
之前写过一篇小程序分享，体验不是很好。因为用户点击去分享时，canvas绘制并转换成图片需要一定的时间，用户视觉等待的时间有点长。为了更好的优化这一体验，我们可以这么做： 1、用户点击去分享，先用页面标签将海报图绘制出来； 2、当用户点击保存的时候，我们执行绘制canvas绘制，canvas转换图片，保存图片的过程。 一、用页面标签把海报图画出来，这个不需要讲解了，前端都能做到； 二、我们详细讲解一下canvas绘制的思路： 1、配置海报上的信息，需要绘制什么内容 2、用户点击保存按钮 // 点击保存事件
微信小程序canvas实现保存图片分享
weixin_45000975的博客
05-04 955
onLoad: function (options) { console.log(options) this.qrUrl = decodeURIComponent(options.qrUrl) // console.log(this.qrUrl) let systeminfo = wx.getSystemInfoSync(); this.bili = sys...
微信小程序绘制到canvas上并保存图片
Fz的博客
09-22 586
绘制画布Canvas并保存
小程序使用canvas绘画并保存图片，组件
weixin_43923808的博客
05-05 525
效果如图： <template> <view class="xx-share" bind:tap="handleModal"> <view class="flez_jz"> <image wx:if="{{showPoster}}" src="{{canvasSrc}}" class="img_canv" mode="aspect...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值