uniapp h5 海报

开发的时候用浏览器预览会出现跨域看不到的问题，不用慌上传到线上后就没问题了

<template><view><!-- 头部导航 --><u-navbar bgColor="#ffffff" :placeholder="true" height="80rpx" leftIconSize="44rpx" @leftClick="back"><view class="navTitle" slot="center">邀请好友</view></u-navbar><view style="height: 50rpx;"></view><canvas class="mycanvas" :style="{'width':canvasWidth+'px','height':canvasHeight+'px'}" canvas-id="secondCanvas" @error="canvasIdErrorCallback"></canvas><swiper class="posters" previous-margin="110rpx" next-margin="50rpx"><swiper-item v-for="(item,index) in aclist" :key="index"><image :src="item" style="width: 540rpx;height: 1000rpx;"></image></swiper-item></swiper><view class="showtoto">长按保存，分享邀请好友</view></view>
</template><script>import {goback} from '@/common/publice.js'export default{data(){return{aclist:[],//生成的海报showList:[],//base64bglist:[],//海报背景图codeImg:'',nowCanvas:0,canvasWidth:270,canvasHeight:500,}},onLoad() {const postersList =  uni.getStorageSync('postersList');if(postersList){let dd = JSON.parse(postersList);this.aclist = dd;}else{this.getShareBackImgList();this.qrcode();uni.showLoading({title:'生成中...'})}},methods:{canvasIdErrorCallback(e) {uni.hideLoading()uni.showToast({title:'海报生成失败',icon:'none'})},// 返回back(){goback();},//生成海报svaeCanvas(e){const that = this;var ctx = uni.createCanvasContext('secondCanvas',this)//绘制图像到画布ctx.drawImage(e,0,0,this.canvasWidth,this.canvasHeight);//坐标0，0,铺满整个canvasctx.drawImage(this.codeImg,85,310,100,100);//坐标0，0,铺满整个canvas//画布生成执行ctx.draw(true, () => {//画布生成海报图uni.canvasToTempFilePath({x:0,y:0,destWidth: 750,//输出后的图片宽度destHeight: 1448,//输出后的图片高度canvasId: 'secondCanvas',quality:1,//图片质量success(res) {// 在H5平台下，tempFilePath 为 base64//base64格式的图片在h5下好像不能长按保存，要转成图片链接(文件流)才行that.showList.push(res.tempFilePath)ctx.clearRect(0,0,that.canvasWidth,that.canvasHeight); //清空画布//多张海报if((that.nowCanvas+1) !== that.bglist.length){that.nowCanvas += 1;that.svaeCanvas(that.bglist[that.nowCanvas].img)//继续生成}else{//等所有海报都生成成功,再去转换that.showList.map((q,i) =>{that.zhuan(i)})}},fail(res) {uni.hideLoading()ctx.clearRect(0,0,that.canvasWidth,that.canvasHeight);//清空画布uni.showToast({title:'海报生成失败',icon:'error'})}})})},//传给后端，将base64图片转成图片链接async zhuan(i){let data = await this.$api.base64imgsave({img:this.showList[i]})uni.hideLoading()if(data.code == 1){let path = this.$baseUrl + data.data.url;this.aclist.push(path);if(this.bglist.length == this.aclist.length){let dd = JSON.stringify(this.aclist);uni.setStorageSync('postersList',dd);}}else{uni.showToast({title:'图片转换失败',icon:'none'})}},//获取海报背景async getShareBackImgList(){let data = await this.$api.getShareBackImgList()if(data.code == 1){let arr = [];data.data.map(r =>{r.img = this.$baseUrl + r.img;})this.bglist = data.data;if(this.codeImg){this.svaeCanvas(this.bglist[0].img)}}else{uni.hideLoading()uni.showToast({title:'数据获取失败',icon:'error'})}},//获取个人二维码async qrcode(){let data = await this.$api.getVipEwm()if(data.code == 1){this.codeImg = this.$baseUrl + data.data;if(this.bglist.length>0){this.svaeCanvas(this.bglist[0].img)}}else{uni.hideLoading()uni.showToast({title:'二维码获取失败',icon:'none'})}},}}
</script><style scoped lang="scss">.mycanvas{position: absolute;top: -1000px;left: -1000px;z-index: -999;margin-left: 100rpx;}.posters{width: 100%;height: 1000rpx;}.showtoto{margin-top: 40rpx;text-align: center;font-size: 30rpx;color: #666;}.can{position: absolute;top: -500px;left: -500px;z-index: -999;}
</style>

uniapp h5 海报相关推荐

Uniapp绘制海报终极解决方案（微信小程序同样适用）
Uniapp绘制海报终极解决方案(微信小程序同样适用) 文章目录 Uniapp绘制海报终极解决方案(微信小程序同样适用) 问题原因与分析解决方案完整代码问题原因与分析背景介绍在微信小程序开发 ...
小程序海报和H5海报生成
小程序海报和H5海报海报一.Canvas用法二.小程序海报 1. 小程序的canvas 2.使用示例 3.结果三.H5海报 1.安装插件html2canvas 2.使用示例 3.结果总结海 ...
h5海报设计开源工具_5个用于教幼儿阅读的开源工具
h5海报设计开源工具任何看到儿童使用平板电脑或智能手机的人都会观察到他们看似天生的能力,即可以滚动应用程序并在屏幕上滑动,从而弯曲"数字原生"肌肉. 根据常识媒体 ( Commo ...
uniapp h5 微信打开双标题处理
uniapp h5 在微信内打开双标题的问题解决办法在page.json文件下将 globalStyle 下的 navigationStyle 设置为 "custom" 即可解 ...
UNI-APP 生成海报/DOM转图片
UNI-APP 生成海报页面部分 <template><view class='page'><input type="text" value=&qu ...
uniapp H5嵌套通讯方案-webviewiframe
uniapp H5嵌套通讯方案-webview&iframe 背景 webview方案父级手机app调试情况 H5情况子级(嵌套页面) 手机app调试情况父节点是H5情况完整代码: ...
使用uniapp做海报的坑
使用uniapp做海报有两种方法 1,使用canvas(uniapp官网有插件,可以根据仿照例子做一个) 2,使用HTML2canvas(不过使用这个需要获取dom节点,因为小程序是没有dom节点这一 ...
uniapp h5、app引用外部在线js
uniapp h5.app引用外部在线js 1. H5 在app.vue var script = document.createElement('script'); script.src = &qu ...
uniapp h5地图导航
uniapp h5地图导航 view部分 <label @click="daohang">导航</label> js部分 export default {d ...

uniapp h5 海报

uniapp h5 海报相关推荐

最新文章

热门文章