微信小程序之html5 canvas绘图并保存到系统相册

开始实现之前先上个效果图

 

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({
      src: imgpath,
      success: res => {
        resolve(res)
      },
      fail: res => {
        reject(res)
      }
    })
  })
}

// 封装获取节点选择器信息
export const getselectqurey = (querystr) => {
  return new promise(resolve => {
    var query = wx.createselectorquery();
    query.select(querystr).boundingclientrect();
    query.exec(res => {
      resolve(res)
    })
  })
}

// 封装把画布导出生成指定大小的图片
export const canvastotempfilepath = (width, height, canvasid, filetype = 'jpg') => {
  return new promise((resolve, reject) => {
    wx.canvastotempfilepath({
      width,
      height,
      canvasid,
      filetype,
      success: res => {
        resolve(res)
      },
      fail: res => {
        reject(res)
      }
    })
  })
}

// 封装保存图片到系统相册
export const saveimagetophotosalbum = (filepath) => {
  return new promise((resolve, reject) => {
    wx.saveimagetophotosalbum({
      filepath,
      success: res => {
        resolve(res)
      },
      fail: res => {
        reject(res)
      }
    })
  })
}

二、视图的实现

.wxml

<view class="icon-download" catchtap="getcanvas">点击生成图片</view>
<!-- 二维码大图 -->
<view class='shade' wx:if="{{isshowcanvas}}">
  <view class='qr-code'>
    <canvas class='qr-canvas' canvas-id="qrcanvas" id="qrcanvas"></canvas>
    <view class='qr-btn'>
      <view class='qr-btn-save' catchtap='saveimagetophotosalbumfunc'>保存图片,分享到朋友圈</view>
      <view class='qr-btn-cancel' catchtap='hidecanvas'>取消</view>
    </view>
  </view>
</view>
<!-- 二维码大图.end -->

.wxss

/* 查看大图 */
.shade {
  width: 100%;
  height: 100%;
  background-color: rgba(240, 235, 235, 0.5);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
}
.qr-code {
  width: 600rpx;
  height: 1000rpx;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* margin: 30rpx auto; */
}
.qr-canvas {
  display: block;
  background-color: #fff;
  margin: 0 auto;
  width: 600rpx;
  height: 900rpx;
}
.qr-btn {
  width: 600rpx;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  background-color: #658dc5;
}
.qr-btn-save {
  flex: 0 0 500rpx;
  text-align: center;
  border-right: 1rpx solid #fff;
}
.qr-btn-cancel {
  text-align: center;
  flex: 0 0 100rpx;
}

三、创建canvas并保存到系统相册

tips

商品图是正方形的，所以这里商品图的宽高都用canvas的宽文字不能换行，这里只是简单的处理了一下
 

注意: wx.canvastotempfilepath(object object, object this) 这个的使用，文档有一句话需要注意的：“把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。”

const app = getapp()
const regeneratorruntime = app.globaldata.regeneratorruntimeconst
const util = require('../../utils/util.js')
import {
  getselectqurey,
  getwximageinfo,
  canvastotempfilepath,
  saveimagetophotosalbum
} from '../../datas/common.js'

page({
  data: {
    isshowcanvas: false, // 是否显示canvas    
    wxacode: 'https://xxx..jpg', // 商品小程序码
    goodsimageurl: 'https://xxx..jpg', // 商品图片    
    canvastempfilepath: '', // canvas导出生成图片的临时路径  
  },

  // 点击显示要生成的canvas  
  getcanvas(e) {
    if (!this.data.wxacode) {
      util.showtoast('二维码生成失败');
      return;
    }
    this.setdata({
      isshowcanvas: true
    }, () => {
      this.createcanvas();
    })
  },

  // 隐藏canvas  
  hidecanvas() {
    this.setdata({
      isshowcanvas: false
    })
  },

  // 创建canvas  
  async createcanvas() {
    wx.showloading({
      title: '图片生成中...'
    })
    const _this = this

    // 创建节点选择器    
    const res = await getselectqurey('#qrcanvas');

    // canvas的宽高    
    const cvwidth = res[0].width;
    const cvheight = res[0].height;
    const cvsubvalue = cvheight - cvwidth
    const qrwidth = cvsubvalue / 1.5
    const qrmargin = (cvsubvalue - qrwidth) / 2
    const qrx = cvwidth - qrwidth - qrmargin / 2
    const qry = cvwidth + qrmargin
    const shopnamey = cvwidth + cvsubvalue - qrwidth

    // 二维码网络图片转临时路径    
    let qrimagepath = '';
    try {
      const wxacode = _this.data.wxacode;
      const qrimage = await getwximageinfo(wxacode);
      qrimagepath = qrimage.path
    } catch (e) {
      wx.hideloading();
      this.hidecanvas();
      util.showtoast('二维码生成失败');
      return;
    }

    // 商品网络图片转临时路径    
    let goodsimagepath = '/images/default_goods.png';
    const goodsimage = _this.data.goodsimageurl;
    if (goodsimage) {
      const goodsimageres = await getwximageinfo(goodsimage);
      goodsimagepath = goodsimageres.path;
    }

    // 创建canvas    
    var ctx = wx.createcanvascontext('qrcanvas', _this);

    // 设置背景    
    ctx.setfillstyle('#fff');
    ctx.fillrect(0, 0, cvwidth, cvheight);

    // 设置商品图片 商品图宽高是一样的    
    ctx.drawimage(goodsimagepath, 0, 0, cvwidth, cvwidth);

    // 设置二维码图片    
    ctx.drawimage(qrimagepath, qrx, qry, qrwidth, qrwidth);

    // 设置店铺名称    
    const shopname = '我是店铺名称';
    ctx.setfillstyle('black')
    ctx.setfontsize(16)
    ctx.settextalign('left')
    ctx.filltext(shopname, 10, shopnamey, cvwidth - qrwidth);

    // 设置商品名称 文字不能换行，这里只是简单的处理了一下    
    const goodsname = '一个名字很长很长的商品就问你怕不怕';
    let goodsname1 = '';
    let goodsname2 = '';
    ctx.setfillstyle('black')
    ctx.setfontsize(14)
    ctx.settextalign('left')
    if (goodsname.length <= 10) {
      ctx.filltext(goodsname, 10, shopnamey + 30, cvwidth - qrwidth);
    } else
    if (goodsname.length > 10 && goodsname.length <= 22) {
      goodsname1 = goodsname.substring(0, 10);
      goodsname2 = goodsname.substring(10);
      ctx.filltext(goodsname1, 10, shopnamey + 30, cvwidth - qrwidth);
      ctx.filltext(goodsname2, 10, shopnamey + 50, cvwidth - qrwidth);
    } else {
      goodsname1 = goodsname.substring(0, 10);
      goodsname2 = goodsname.substring(10, 22) + '...';
      ctx.filltext(goodsname1, 10, shopnamey + 30, cvwidth - qrwidth);
      ctx.filltext(goodsname2, 10, shopnamey + 50, cvwidth - qrwidth);
    }

    // 设置提示    
    const tiptext = '长按识别小程序，马上下单！';
    ctx.setfillstyle('gray')
    ctx.setfontsize(8)
    ctx.settextalign('center')
    ctx.filltext(tiptext, cvwidth / 2, cvheight - 10);

    // 完成    
    ctx.draw(false, () => {
      wx.hideloading();
      _this.canvastotempfilepathfunc(cvwidth, cvheight, 'qrcanvas')
    });
  },

  // 把当前画布指定区域的内容导出生成指定大小的图片  
  async canvastotempfilepathfunc(cvwidth, cvheight, qrcanvas) {
    try {
      let res = await canvastotempfilepath(cvwidth, cvheight, qrcanvas);
      this.setdata({
        canvastempfilepath: res.tempfilepath
      });
    } catch (error) {
      console.log(error);
      util.showtoast(error.errmsg);
    }
  },

  // 保存图片到本地  
  async saveimagetophotosalbumfunc() {
    try {
      let res = await saveimagetophotosalbum(this.data.canvastempfilepath);
      console.log(res);
      this.hidecanvas();
      util.showtoast('图片保存成功');
    } catch (err) {
      console.log(err);
    }
  }
})

写得比较简单，因为主要是方便自己做记录的，所以也没有考虑到过多的使用场景。

总结

以上所述是小编给大家介绍的微信小程序之html5 canvas绘图并保存到系统相册，希望对大家有所帮助