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

本文介绍如何在微信小程序中利用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,
    //弹
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值