小程序将页面生成图片，并上传至阿里OSS

最新推荐文章于 2023-06-09 09:48:22 发布

胡不了

最新推荐文章于 2023-06-09 09:48:22 发布

阅读量763

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_39045659/article/details/126609578

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

    前端时间公司的业务里，需要自动将背景图和用户输入的标题生成封面并上传至OSS的需求，感觉以后会用到，因此记录一下。

一.将页面生成图片

使用了Painter 2.0库插件(Painter)。

step-01：下载demo，将printer组件放入自己的小程序component下。
step-02：在需要生成图片的页面文件夹下增加canvas.js文件

// canvas.js
module.exports = data => {
  return (
    {
      "width": "620px",
      "height": "980px",
      "background": "#ffffff",
      "views": [
        {
          "type": "text",
          "text": data.name,
          "css": {
            "color": "#191846",
            "background": "rgba(0,0,0,0)",
            "width": "536px",
            "top": "486px",
            "left": "41px",
            "rotate": "0",
            "borderRadius": "",
            "borderWidth": "",
            "borderColor": "#000000",
            "shadow": "",
            "fontSize": "30px",
            "lineHeight": "43px",
            "fontWeight": "normal",
            "textStyle": "fill",
            "textDecoration": "none",
            "fontFamily": "",
            "textAlign": "left"
          }
        },
      ]
     }
  );
}

step-03：在需要生成图片的页面js中引入canvas。

import canvas from './canvas.js';

painterBtn() {
    let name="我是传递的参数";
    this.setData({
      // wxml: canvas(name)  // 在此传递参数
      wxml:{
        width: "654rpx",
        height: "1000rpx",
        //背景图片资源
        background: "/assets/2.jpg",
        //根据自己所需的样式在view中配置。
        views: [
          {
            type: "text",
            text: "标题标题标题",
            css: {
              fontFamily: "Bitstream Vera Serif Bold",
              width:"300rpx",
              textAlign:"center",
              fontWeight:800,
              top: "400rpx",
              fontSize: "56rpx",
            },
          }]
      }
    })
    wx.showLoading({
      title: '正在生成中...',
    })
  },
  onImgOK(e) {
    console.log(e);
    //e.detail.path为图片路径
    this.setData({
      src: e.detail.path
    })
    wx.hideLoading()
    wx.getFileSystemManager().readFile({
       filePath: e.detail.path, //选择图片返回的相对路径
       encoding: 'base64', //编码格式
       success: result => { //成功的回调
        let file = 'data:image/png;base64,' + result.data;
        //业务代码
    	}
   	})
  }

页面wxml代码

 <!-- 这个是生成的海报图片预览 -->
  <image src="{{src}}" style="height:980rpx" mode="aspectFit" class="canvas-img"></image>
  <!-- 这个是painter组件使用 -->
  <painter palette="{{wxml}}" style="position: absolute; top: -9999rpx;"  bind:imgOK="onImgOK" />
  <!-- 生成海报按钮 -->
  <button bindtap="painterBtn">生成海报</button>

至此图片就生成啦。可以拿到图片的路径和base64。

二.上传到OSS服务器

由于我们公司的OSS后端有接口可以获取到上传至OSS所需的参数。我就只贴出调用微信上传文件至OSS的代码

wx.uploadFile({
  url: “你的OSS服务地址”,
  filePath: e.detail.path,
  name: 'file',
  header: {
    "Content-Type": "multipart/form-data"
  },
  formData: {
  	name:e.detail.path,
    key: key,
    policy: policyy,
    OSSAccessKeyId: accessid,
    signature: signature
  }, 
  //调用成功的回调
  success(r) {
   
  }
})