微信小程序之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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Java中final关键字详解
2015/08/10 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python3人脸识别的两种方法
2019/04/25 Python
python urllib爬虫模块使用解析
2019/09/05 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
教师应聘自荐信范文
2014/03/14 职场文书
五一活动标语
2014/06/30 职场文书
人与自然观后感
2015/06/16 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL