11.微信小程序之canvas生成图片并保存到手机

最新推荐文章于 2024-07-31 13:57:35 发布

什么~

最新推荐文章于 2024-07-31 13:57:35 发布

阅读量2.7k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/panzina/article/details/83688098

版权

本文介绍如何在微信小程序中利用canvas将页面内容转化为图片，并通过wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum接口保存到手机相册，以实现分享到朋友圈的功能。虽然提供了代码片段，但实际应用时需结合具体情况进行调整。

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

在小程序中，会有这样一种需求，保存某一个页面并将其分享到朋友圈。一般的做法是：将这个页面用canvas绘制出来，通过wx.canvasToTempFilePath，把当前画布指定区域的内容导出生成指定大小的图片。然后再通过wx.saveImageToPhotosAlbum，保存图片到系统相册。由用户发朋友圈，在相册中选择图片即可。

代码展示部分，只是个逻辑，直接粘贴复制不可行。

canvas.wxml

<view wx:if="{
  {showShare}}" class='share'>
<!-- canvas 需要和showShare保存同步显示和隐藏-->
  <canvas canvas-id='myCanvas' class='canvas'></canvas>
  <!-- /canvas -->
  <view class='share-content'>
    <image class='share-img' src='{
  {targetSharePath}}'></image>
    <button bindtap='saveImageTap' class='share-btn'>保存</button>
  </view>
  <view class='share-close' bindtap='closeShare'>
    <image class='close-img' src='/image/close.png'></image>
  </view>
</view>

canvas.js


Page({

  data: {
    
    circle:'',
    canvasHeight:0,
    imageWidth: 0,
    imageHeight: 0,
    spreadBgUrl:'',
    targetSharePath: null,
    //弹