uniapp简单生成海报

之前一直觉得麻烦压根没看，结果突然就要用，特别记录下。
这次用的最简单的方法，二维码从后台生成，前台只做绘图。

<template><view class='page'><canvas canvas-id="myCanvas"   id='sss'></canvas><image :src="base64" mode="" v-if="base64" class="immm" ></image><button type="primary" @click='bcFn'  >保存图片</button></view>
</template>
<script>export default {data() {return {base64:'',ewm:'XXXXX/uploads/1597824191.png',//线上图片bg_img:'XXXXX/uploads/20200819/9d0d5d30d987a04aa0d35da203a5e605.jpg',//线上图片system_info:[],//系统信息hh:'',ww:''}},onLoad(){ this.system_info =uni.getSystemInfoSync();//屏幕宽高this.ww = this.system_info.windowWidth; //准确的宽高this.hh = this.system_info.windowHeight;var that=this;//这里等promise执行，避免拿不到图片临时路径const promise1 = new Promise((resolve, reject) => {uni.downloadFile({url:that.bg_img,success:(res)=>{      resolve(res)}})});const promise2 = new Promise((resolve, reject) => {uni.downloadFile({url:that.ewm,success:(res)=>{   resolve(res)}})});Promise.all([promise1, promise2]).then((values) => {// console.log(values);this.make_canvas(values[0],values[1]);}); // this.make_canvas(test,test2);},methods: {make_canvas(img01,img02) {const query = uni.createSelectorQuery().in(this);var system_info =this.system_info;let ww = system_info.windowWidth; //准确的宽高let hh = system_info.windowHeight;console.log(system_info);var ctx = uni.createCanvasContext('myCanvas') //绑定画布 ctx.drawImage(img01.tempFilePath, 0, 0,ww,hh); //填充进图片ctx.drawImage(img02.tempFilePath, ww/2-75, hh/3-75,150,150); //填充进图片ctx.setFillStyle('#000')  //设置内容1的文字样式ctx.setFontSize(30);ctx.setTextAlign('center')  //设置对于坐标点的对齐方式 ctx.setFillStyle("#FFFFFF")  //设置内容2的文字样式ctx.setFontSize(20);ctx.setTextAlign('center')  //同上ctx.fillText('快和我一起加入XXXXX',ww/2,hh/3+150)ctx.draw();  //输出到画布中uni.showLoading({ //增加loading等待效果mask:true})setTimeout(()=>{  //不加延迟的话，base64有时候会赋予undefineduni.canvasToTempFilePath({canvasId:'myCanvas',success: (res) => { this.base64=res.tempFilePath}})uni.hideLoading();},1200)},bcFn(){console.log(this.base64);uni.saveImageToPhotosAlbum({  //保存图片filePath:this.base64,  success: (res) => {uni.showToast({title:'保存成功',})},fail(r) {console.log(r)}})}}}
</script>
<style>.input {width: 100%;height: 80rpx;background: #ccc;}#sss {position: absolute;width: 750rpx;height: 1006rpx;top: -99999899rpx;left: -99999899rpx;z-index: 9999;}.immm {width: 750rpx;height: 1000rpx;}
</style>

基本就是这样子，根据自己的审美来调了

uniapp简单生成海报相关推荐

h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
uniapp 实现生成海报并分享给微信好友和保存到本地相册
记录uniapp 生成二维码海报并保存到本地或者分享给微信好友 – 文章目录记录uniapp 生成二维码海报并保存到本地或者分享给微信好友前言一.引入生成二维码的组件二.点击右侧的分享图标生成 ...
uni-app如何生成海报图片
项目场景: 在uni-app中,通过点击邀请分享海报的方式,可以展示不同的海报,并通过扫描海报上的二维码来实现用户之间的关系绑定,从而实现分销功能: 每次生成的海报样式都可能不同,可以根据后台配置的宽 ...
uniapp页面生成海报并保存和分享微信
Painter 画板 | LimeUiLimeUi - 增强型的 uni-app 组件库http://liangei.gitee.io/limeui-docs/components/painter/ ...
uniapp实现生成海报功能
在一些项目中有些需求会需要分享海报的功能,今天呢就为大家分享一下我在用uniapp开发中使用的一款插件,可以任意的布局.超级好用文档链接安排上:https://ext.dcloud.net.cn/p ...
uniapp html生成海报
自行引入组件调用注:只能渲染当前可视页面,附带生成二维码试都不试张嘴就来的滚粗组件poster.vue <template><view class="posterBo ...
uniapp之生成海报收款码
需求:动态修改二维码以及标题头像等内容 1.海报(海报标题超过两行省略,副标题超过三行省略,头像圆角) 海报效果如下: 具体代码如下: <template><view class=& ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...

uniapp简单生成海报

uniapp简单生成海报相关推荐

最新文章

热门文章