您的位置：首页 > Web前端 > > 正文

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

更多时间：2021-09-30 00:13:05 类别：Web前端浏览量：1672

微信小程序canvas缩放

微信小程序之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" alt="微信小程序canvas缩放（微信小程序之html5 canvas绘图并保存到系统相册）" border="0" />

二、视图的实现

.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" alt="微信小程序canvas缩放（微信小程序之html5 canvas绘图并保存到系统相册）" border="0" />

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

总结

以上所述是小编给大家介绍的微信小程序之html5 canvas绘图并保存到系统相册，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

标签：小程序 HTML5 Canvas 绘图保存

上一篇：laravel 表单验证图片（Laravel 自动生成验证的实例讲解:login / logout）

下一篇：云主机需要和哪些产品配合使用（云主机的存储安全如何保障？）

您可能感兴趣

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

微信小程序canvas缩放

热门推荐

排行榜