小程序中画图带二维码并保存图片

最新推荐文章于 2024-07-10 15:24:16 发布

温水煮泡面

最新推荐文章于 2024-07-10 15:24:16 发布

阅读量4.8k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/cq372712678/article/details/90241550

版权

本文档详细讲解了如何在小程序中结合流程图和代码，实现生成包含二维码的图片，并将其保存到用户相册。利用Promise并行处理背景与二维码，通过image组件展示长图。

摘要由CSDN通过智能技术生成

本片介绍下如何用小程序生成带二维码的图片并保存到用户的相册中

流程图

代码实现


var QR = require("../../utils/qrcode.js");

var app = getApp();
var ewmpath = '';
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    base64:'',
    caheight:'',
    cawidth:'',
    zeropath:'',
    sharepath:'',
    showCanvass:true,
    showEwm:true,
    ckb:1.744,//图片长宽比
    ewmckb:0.69//二维码区的长宽比
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
   
    wx.showLoading({
   
      title: '图片生成中...',
      icon: 'loading'
    })
    let that = this;
    var systemInfo = wx.getSystemInfoSync(); 
    let syswidth = systemInfo.windowWidth;
    let pichight = this.data.ckb * syswidth
    this.setData({
   
      caheight: pichight,
      cawidth: syswidth
    })
    console.log(systemInfo.windowWidth); 

    //得到大的背景图
    let promise0 = new Promise(function (resolve,reject){
   
      wx.getImageInfo({
   
        src: app.data.pic_domain +'canvasbg.png',//背景图片地址
        success: function (res) {
   
        
          that.setData({
   
            zeropath: res.path
          })
          resolve(res);
       
        },
      });
    })

     //画二维码
    let promise1 = new Promise(function (resolve, reject) {
   
      console.log("ewwidth:", syswidth / 3)
      console.log("ewheight:", syswidth / 3)
      console.log("ewm:", app.globalData.EwmUrl)//二维码地址
     QR.api.draw(app.globalData.EwmUrl, "myQrcode", syswidth / 3, syswidth / 3);

      setTimeout(()=>{
   
      wx.canvasToTempFilePath({
   
        canvasId: 'myQrcode',
        success(res) {
   
          ewmpath = res.tempFilePath,
          that.setData({
    
            showEwm: false
          })
          resolve(res);
        }
      })},1000)
    });
     
  //组合图片
    Promise.all([
      promise0, promise1
    ]).then(res => {
   
      this.setData({
   
        caheight: (this.data.ckb + this.data.ewmckb) * syswidth,  
      })
      var ctx = wx.createCanvasContext('myCanvas');
      ctx.setFillStyle('white')
      ctx.fillRect(0, 0, syswidth, (this.data.ckb + this.data.ewmckb) * syswidth)
      ctx.drawImage(this.data.zeropath, 0, 0, syswidth, pichight);
      ctx.drawImage(ewmpath, syswidth / 16, pichight + syswidth / 9, syswidth/3, syswidth/3 );
      ctx.setFontSize(13)
      ctx.setFillStyle('black')
      ctx.fillText('相关文字相关文字', syswidth*0.42, pichight+100)

      ctx.draw();
      setTimeout(function () {
   
        wx.canvasToTempFilePath({
   
          canvasId: 'myCanvas',
          success(res) {
   
            that.setData({
   
              sharepath: res.tempFilePath,
              showCanvass:false
            })
          }
        })
       wx.hideLoading();
      }, 500)
    })
     
  },

  //保存图片到相册  
  saveImg:function(){
   
    var that = this;
    wx.saveImageToPhotosAlbum({
   
      filePath: this.data.sharepath,
      success: function (res) {
   
        wx.showToast({
   
          title: '保存成功',
        })
      },
      fail:function(res){
   
        that.openConfirm();
      }
    });
  },

  //拒绝相册权限的处理
  openConfirm: function () {
   
    wx.showModal({
   
      content: '检测到您没打开相册权限，是否去设置打开？',
      confirmText: "确认",
      cancelText: "取消",
      success: function (res) {
   
        console.log(res);
        //点击“确认”时打开设置页面
        if (res.confirm) {
   
          console.log('用户点击确认')
          wx.openSetting({
   
            success: (res) => {
    }
          })
        } else {
   
          console.log('用户点击取消')
        }
      }
    });
  },
  onShareAppMessage:function(){
   
  
  },
  
})

wxml

<image style='width:{
  {cawidth}}px;height:{
  {cawidth*(ckb+ewmckb)}}px' src="{
  {sharepath}}"></image>
<view wx:if="{
  {showCanvass}}">
<canvas canvas-id='myCanvas'style="height:{
  {caheight}}px;width:{
  {cawidth}}px" ></canvas>
<canvas wx:if="{
  {showEwm}}" style="width:{
  {cawidth/3}}px; height:{
  {cawidth/3}}px;" canvas-id="myQrcode"></canvas>
</view>
<button wx:if="{
  {!showCanvass}}"  open-type="share" >转发给朋友</button>
<button wx:if="{
  {!showCanvass}}"  class="button2" bindtap='saveImg'   >保存并分享</button>

用到了promise 同时对背景和二维码图片进行处理加快速度
用一个image图片装最终的长图，方便按钮显示在长图之上

引用的工具js

!(function () {
   

  // alignment pattern
  var adelta = [
    0, 11, 15, 19, 23, 27, 31,
    16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,
    26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28
  ];

  // version block
  var vpat = [
    0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,
    0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,
    0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,
    0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,
    0x541, 0xc69
  ];

  // final format bits with mask: level << 3 | mask
  var fmtword = [
    0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976,    //L
    0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0,    //M
    0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed,    //Q
    0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b    //H
  ];

  // 4 per version: number of blocks 1,2; data width; ecc width
  var eccblocks = [
    1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,
    1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,
    1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,
    1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,
    1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,
    2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,
    2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,
    2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,
    2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,
    2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,
    4, 0, 81, 20, 1, 4, 50, 30, 4, 4