微信小程序合成图片并保存到服务器

最新推荐文章于 2022-11-07 17:32:53 发布

关键我是强哥

最新推荐文章于 2022-11-07 17:32:53 发布

阅读量1.8k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_39082908/article/details/103029847

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此方法是通过微信小程序端合成图片，并将合成后的图片已base64的形式发送到服务器保存，此步骤一定程度节省了服务器资源。
效果图如下：
在这里插入图片描述
JS代码块：

const app = getApp()
// pages/generalize/qr-code/qr-code.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    	var that=this 
          that.setData({
            painting: {
              width: 480,
              height: 768,
              clear: true,
              views: [
                {//主图
                  type: 'image',
                  url: res.data.data.backimg,
                  top: 0,
                  left: 0,
                  width: 480,
                  height: 768,
                },
                {//头像
                  type: 'image',
                  url: res.data.data.headimgurl,
                  top: 77,
                  left: 194,
                  width: 90,
                  height: 90,

                },
                {//二维码
                  type: 'image',
                  url: res.data.data.code,
                  top: 243,
                  left: 164,
                  width: 153.6,
                  height: 153.6
                },
                {
                  type: 'text',
                  content: res.data.data.nickname,
                  fontSize: 12,
                  lineHeight: 24,
                  color: '#383549',
                  textAlign: 'center',
                  top: 182.4,
                  left: 236.8,
                  width: 367.3,
                  MaxLineNumber: 2,
                  breakWord: true,
                  bolder: true
                }
              ]
            },
          })
  },
  eventSave() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareImage,
      success(res) {
        wx.showToast({
          title: '保存图片成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },
  eventGetImage(event) {
      const { tempFilePath } = event.detail
      this.setData({
        shareImage: tempFilePath,
        hidden: true,
      })
    if (event.currentTarget.dataset.sheng == 1) {
      wx.getFileSystemManager().readFile({
        filePath: tempFilePath, //路径
        encoding: 'base64', //编码格式
        success: res => { //成功的回调
          //将base64数据发往服务器 存储起来
          var that = this
          wx.request({
            url:'服务器api接口地址，保存图片', //
            data: {
              base64: 'data:image/png;base64,' + res.data
            },
            headers: {
              'Content-Type': 'application/json'
            },
            method: "POST",
            success: function (res) {

            }
          })

        }
      })
    }
    
  },
  //图片点击事件
 imgYu: function(event) {
         var src = event.currentTarget.dataset.src;//获取data-src
         var imgList = [src];//获取data-list
         //图片预览
         wx.previewImage({
             current: src, // 当前显示图片的http链接
             urls: imgList // 需要预览的图片http链接列表
 
      })
    
  }
})

WXML代码块：

<view class="box">
<image  src="{{shareImage}}"  bindtap="imgYu" data-list="{{shareImage}}" data-src="{{shareImage}}"   mode="widthFix"></image>
  <canvasdrawer   painting="{{painting}}" class="canvasdrawer" data-sheng="{{sheng}}"  bind:getImage="eventGetImage"/>
  <view class='save'>点击放大图片，长按保存图片</view>
</view>
<loading hidden="{{hidden}}" bindchange="loadingChange">
            {{tip}}
</loading>

wxss代码块：

.box{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.box image{
  width: 100%;

}
.save{
  position: absolute;
  bottom: 300rpx;
  left: 0;
  width: 100%;
  font-size: 30rpx;
  color: #103C5A;
  text-align: center;
}

.share-image {
  width: 100;
  height: 1600rpx;
  margin: 0 15rpx;
}
.title{width:100%; text-align: center;font-size: 14px;margin-top: 20rpx;}

button {
  margin-top: 20rpx;
}