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


Posted in HTML / CSS onJune 20, 2019

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

微信小程序之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绘图并保存到系统相册,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 #HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 #HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 #HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 #HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 #HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 #HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 #HTML / CSS
You might like
php 什么是PEAR?(第二篇)
2009/03/19 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
python中的yield使用方法
2014/02/11 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python实现二维插值的三维显示
2018/12/17 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python中字符串与编码示例代码
2019/05/20 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
超市商业计划书
2014/05/04 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android