uniapp生成海报

我们最后想要的效果：

1.分析结构：
因为只有二维码是后台获取的所以我们只有一个大背景图和一个二维码
2.所用技术：
uni.createCanvasContext----创建canvas对象并且将图片等元素插入到canvas中
uni.canvasToTempFilePath----将canvas对象转换成图片
uni.saveImageToPhotosAlbum----保存图片
3.操作
首先在页面中插入一个canvas标签并且设置 canvas-id、样式

<canvas canvas-id="canvas" style="width:648rpx;height: 936rpx;margin: 30rpx auto;"></canvas>

当我们页面解析完成之后执行

         async creatCanvas(url) {let that = this//创建canvas对象this.canvas = uni.createCanvasContext('canvas', this);//这里是我自己的方法下载图片//canvas中的插入的图片不能是网络地址只能是下载到本地的 let imgUrl = await this.urlTofile(url);//插入背景图 第2 3 4 5参数单位是px的所以我们要做适配 rpx转换为px 可以自定义方法 也可以使用uniapp中的方法this.canvas.drawImage(require('./static/canvas.png'), 0, 0, this.rpxTopx(648), this.rpxTopx(936));//将二维码插入到canvas中this.canvas.drawImage(imgUrl, this.rpxTopx(174), this.rpxTopx(450), this.rpxTopx(300), this.rpxTopx(300));//成功之后this.canvas.draw(true, res => {setTimeout(() => {//讲canvas转换成图片uni.canvasToTempFilePath({x: 0,y: 0,canvasId: 'canvas',fileType: 'png',quality: 1,success: success => {this.imgUrl = success.tempFilePath// that.canvas.draw()}})}, 500)});},

这里海报图就出来了也已经存到 imgUrl字段里了
然后就是保存图片

         savePhoto() {uni.saveImageToPhotosAlbum({filePath: this.imgUrl,success: () => {// uni.hideLoading();uni.showToast({title: '保存成功',icon: 'none'})},fail: () => {uni.hideLoading();},complete: () => {}});},

最后提供一下 rpx转px 和下载图片的方法

         //rpx转pxrpxTopx(rpx) {return (rpx / 750) * wx.getSystemInfoSync().windowWidth},//下载图片urlTofile(url) {return new Promise((resolve, reject) => {uni.getImageInfo({src: url,success(res) {resolve(res.path)},fail(res) {console.log("fail -> res", res)uni.showToast({title: "图片下载异常",duration: 2000,icon: "none"})}})})},

uniapp生成海报相关推荐

UNI-APP 生成海报/DOM转图片
UNI-APP 生成海报页面部分 <template><view class='page'><input type="text" value=&qu ...
微信小程序/uni-app生成海报功能@令狐张豪
使用技术栈:uni-app 使用官方文档提供的API:createCanvasContext(uni-app) /CanvasContext(原生) *注意:海报里用到的图片都得先使用小程序提供的下载 ...
uniapp生成海报，保存相册 / 分享微信好友和朋友圈
<view> <u-button @click="createPoster">生成海报</u-button> <u-popup :show ...
uni-app生成海报并分享
lime-painter是一款canvas海报组件,可以更轻松的生成海报海报画板 - DCloud 插件市场一款canvas海报组件,更优雅的海报生成方案https://ext.dcloud.ne ...
uniapp页面生成海报并保存和分享微信
Painter 画板 | LimeUiLimeUi - 增强型的 uni-app 组件库http://liangei.gitee.io/limeui-docs/components/painter/ ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...
uniapp 截图或者生成海报
需求:uniapp移动端需要生成一张当前界面的海报方案一:类似于手机按钮截图效果.实现代码如下: doSaveScreen() { let $this = this; ...
uni-app app端用highcharts绘制图表，并生成海报保存到手机相册
uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制. 首先引用安装highcharts,封装成一个组件 n ...
uniapp 生成商品海报并分享保存
uniapp 生成商品海报并分享保存 <template><view class="center"><view class="icon-it ...
uni-app生成分享图片（使用 Painter 生成分享海报）
Painter 支持文本.图片.矩形.qrcode 类型的 view 绘制. 如何使用 1.引入代码.注意:存放目录 uni-app根据不同平台插件存放目录不同. git clone https: ...

uniapp生成海报

uniapp生成海报

uniapp生成海报相关推荐

最新文章

热门文章