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

    前端时间公司的业务里，需要自动将背景图和用户输入的标题生成封面并上传至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) {}
})

ok！

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

Java生成微信小程序二维码、上传至阿里云OSS
依赖 <dependency><groupId>com.aliyun.oss</groupId><artifac ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
uni-app——小程序实现本地图片的上传以及身份证的智能识别
文章目录前言一.示例图二.实现过程 1.完成提交图片的api地址 2.获取本地图片 3.将本地图片上传至开发者服务器三.具体实现代码四.身份证的智能识别总结前言上传本地图片的功能很常见 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
微信小程序图片(单图多图上传显示)
微信小程序上传图片组件自定义最近在做微信小程序开发的时候,遇到了一个问题,就是图片上传于显示问题,微信自带的感觉用起来还是不方便,于是就萌生了自定义图片上传于显示组件废话不多说直接上代码首先创建 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
关于微信小程序上传，在微信公众平台|小程序中找不到上传的代码
2019/05/16 小程序小白入门最开始的时候,我不知道该如何上传自己的代码.打开微信开发平台,找到"工具"选项,再点击"上传"就好了 ①找到"工 ...
Udesk对接微信小程序实现商品浏览轨迹上传
作者:张振琦 Udesk提供了小程序专用的行为轨迹SDK,可以用来收集客户的商品浏览轨迹,并在客服对话窗口中访问轨迹处可以查看. 在开发之前,需要先完成两个操作: 确认Udesk客服系统内绑定的小程序 ...

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

一.将页面生成图片

二.上传到OSS服务器

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

最新文章

热门文章