uniapp开发微信小程序生成二维码海报

<template>
<view>
<button @click="open"></button>
<view class="canvasPop" v-if="canvasPopBool" style="z-index: 9999999;">
//关闭按钮<uni-icons class="close" type="close" size="30" @click="canvasPopBool=false"></uni-icons>
//uniapp自带的组件  canvas-id是组件的标识符  画布组件<canvas canvas-id="firstCanvas" id="firstCanvas"></canvas><view class="btn" @click="saveCanvasFn">保存图片</view></view>
</view>
</template>
<script>
export default {
data():{
return{
canvasPopBool:false
}
},
methods:{
open:{
this.canvasPopBool=true
const obj={imgUrl: this.baseUrl + this.bannerList[0].fileUrl, //内容图片地址title: this.routeItem.name,//内容 标题str: 'money',price:this.routeItem.consumeAmount, //金额}
this.poster(obj)},
//生成海报方法
poster(obj){
let context = uni.createCanvasContext('firstCanvas');  //获取到画布组件的唯一标识符ID
//下面两行代码获取到背景图片地址（后端返给存在了本地存储）
let allImg = uni.getStorageSync('allImg');
let newUrl = allImg.pic41;
//获取到到内容图片地址let newUrlTwo = obj.imgUrl;uni.showLoading({title: '努力加载中...',mask: true});uni.downloadFile({  //下载上传方法url: newUrl, //背景图片地址success(res) {uni.hideLoading(); //关闭uni.showLoading
//drawImage绘制图像到画布 第一个参数图片地址 0第一个是距离X轴的距离 0第二个是距离Y轴距离 275是在目标画布上绘制图像的宽度 482是在目标画布上绘制图像的高度context.drawImage(res.tempFilePath, 0, 0, 275, 482);context.font = "18px Arial";
//文字颜色context.fillStyle = '#333';
//测量文本尺寸信息，目前仅返回文本宽度const textWidth = context.measureText(obj.title).width;if (textWidth >= 160) {for (let i = 0; i < 4; i++) {const dataOne = obj.title.substr(i * 8, 8);const dataThree = 360 + (i * 20);
//在画布上绘制被填充的文本 dataOne是填充的内容  21是距离X轴的位置  dataThree距离Y轴的位置context.fillText(dataOne, 21, dataThree);}} else {context.fillText(obj.title, 21, 360);}context.font = "18px Arial";context.fillStyle = '#ff3400';if (obj.str == 'money') {context.fillText('￥' + obj.price, 21, 450);} else if (obj.str == 'jifen') {context.fillText(obj.price + '积分', 21, 450);}uni.downloadFile({url: newUrlTwo,  //内容图片success(res2) {context.drawImage(res2.tempFilePath, 21, 100, 233, 233);context.draw(); //开始绘制}});}});
}
//保存图片
saveCanvasFn(){
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
uni.canvasToTempFilePath({canvasId:'firstCanvas',success(res){
//保存图片到相处uni.saveImageToPhotosAlbum({filePath:res.tempFilePath,success(){this.canvasPopBool = false;uni.showToast({title: '图片保存成功',icon: 'none'});}});}})}
}
}
</script>
<style>// 生成海报盒子样式  .canvasPop {width: 100%;height: 100%;background-color: rgba($color: #000, $alpha: 0.3);display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;.close {position: absolute;right: 30rpx;top: 30rpx;}#firstCanvas {width: 275px;height: 482px;}.btn {height: 60rpx;background-color: blue;border-radius: 30rpx;margin-top: 30rpx;padding: 0 30rpx;color: white;line-height: 60rpx;}}
</style>

模板：

uniapp开发微信小程序生成二维码海报相关推荐

【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
微信小程序生成二维码js
微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs ...
【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景调用微信小程序生成二维码接口,提示报错错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
【微信小程序生成二维码并下载，分享】
微信小程序生成二维码并保存,分享,下载依赖工具使用weapp-qrcode-base64库生成二维码的base64编码链接:weapp-qrcode-base64 安装 npm install ...
微信小程序生成二维码带参海报
微信小程序生成二维码带参海报没错,就是用 canvas 来实现文章目录微信小程序生成二维码带参海报获取屏幕分辨率比生成二维码获取网络图片并转为本地临时文件绘制背景图片以及二维码代码片段 ...
微信小程序生成二维码，接口C接收值
微信小程序生成二维码,接口C接收值深坑解决接口C替代方案深坑当我们用微信二维码生成接口c类型的二维码时,需要传入参数,而根据文档我们填写 path时传入参数例如 pah: page/in ...
微信小程序生成二维码可文字，链接，图片（支持中文）
功能简介 : 微信小程序生成二维码,支持文本和网址,支持中英文,输入框可清空,可单击保存二维码...... 核心代码 : createQrCode:function(url,canvasId,cavW ...
小程序生成二维码海报
在小程序开发完成之后,我们会时常遇到这样的一个问题,小程序该怎么推广,增加曝光量,让更多的人看到?我们都知道,小程序推广一般是给小程序增加一个分享的功能,可以分享到群里面. 但是不能发朋友圈,若是想发 ...

uniapp开发微信小程序生成二维码海报

uniapp开发微信小程序生成二维码海报相关推荐

最新文章

热门文章