uniapp小程序生成名片海报

<template><view class="view"><view class="post" @click.stop.prevent="change"><view class="canvas" v-show="hasPost"><canvas id="firstCanvas" :style="{ 'margin-top':cansHeight/10 + 'px',width: cansWidth + 'px', height: cansHeight + 'px'}" canvas-id="firstCanvas"></canvas><view class="bottom"><view @click="saveCans(1)">保存到手机相册</view><view @click="saveCans(2)">保存并预览</view></view><view class="iconfont icon-closewhite" @click.stop.prevent="close"></view></view><image :src="imgsrc" :show-menu-by-longpress="1" mode="" v-if="showImg" class="coverImg" @click.stop.prevent></image><view class="tip" v-if="showImg">长按图片可发送好友</view></view></view>
</template>
<script>var thatvar rpximport urlConfig from '../../common/util/config.js'import { mapState, mapActions, mapMutations } from 'vuex'export default {data() {return {showImg: false,hasPost: false,cansWidth: 690, //海报宽度cansHeight: 800, //海报高度realName: 'xxx',//名字headImg: 'https://dev-commerce.oss-cn-beijing.aliyuncs.com/file/wechat-static/head.jpg',//头像phone: 'xxxxxxxxxxx',//电话jobName: 'xxx',//公司职位industryName: 'xxxx',//行业companyName: 'xxxx',//公司名称companyId: -1,qrCode: '',//小程序码str: '长按识别小程序码，马上认识我',imgsrc: "",//保存图片的路径}},onLoad:function(option){that=thisconsole.log(option,'00000000000')this.realName = option.realName ? option.realName:'xxx'this.headImg = option.headImg ? option.headImg:'https://dev-commerce.oss-cn-beijing.aliyuncs.com/file/wechat-static/head.jpg'this.phone = option.phone ? option.phone:'xxxxxxxxxxx'this.jobName = option.jobName ? option.jobName:'xxx'this.industryName = option.industryName ? option.industryName:'xxxx'this.companyName = option.companyName ? option.companyName:'xxxx'this.companyId = option.companyId ? option.companyId:-1this.qrCode = 'https://dev-commerce.oss-cn-beijing.aliyuncs.com/file/wechat-static/qrcode.jpg'wx.getSystemInfo({success: function(res) {rpx = res.windowWidth/750;that.cansWidth = that.cansWidth*rpxthat.cansHeight = that.cansHeight*rpx},})console.log(123);that.huizhihaibao() //请求海报数据},computed:{...mapState({id: state => state.user.id,token: state => state.user.token})},methods: {change(){this.showImg = falsethis.hasPost = true},close(){uni.navigateBack()},huizhihaibao(){uni.showLoading({title: '加载中'});uni.hideLoading();//数据请求结束setTimeout(function(){ //定时器，海报方法不能立即执行，等页面渲染完成that.selseimg() },2000);},roundRect(ctx, x, y, w, h, r, c,direction) {//圆的直径必然要小于矩形的宽高          if (2 * r > w || 2 * r > h) { return false; }ctx.save();ctx.translate(x, y);//绘制圆角矩形的各个边  that.drawRoundRectPath(ctx, w, h, r,direction);ctx.fillStyle = c || "#000"; //若是给定了值就用给定的值否则给予默认值  ctx.fill();ctx.restore();},// 生成圆角drawRoundRectPath(ctx, width, height, radius,direction) {ctx.beginPath(0);if(direction == 'all'){//从右下角顺时针绘制，弧度从0到1/2PIctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);//矩形下边线  ctx.lineTo(radius, height);//左下角圆弧，弧度从1/2PI到PI  ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);//矩形左边线  ctx.lineTo(0, radius);//左上角圆弧，弧度从PI到3/2PIctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);//上边线  ctx.lineTo(width - radius, 0);//右上角圆弧  ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);ctx.lineTo(width, height - radius);}if(direction == 'bottom'){  //上圆角//从右下角顺时针绘制，弧度从0到1/2PIctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);//矩形下边线  ctx.lineTo(radius, height);//左下角圆弧，弧度从1/2PI到PI  ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);//矩形左边线  ctx.lineTo(0, 0);//上边线  ctx.lineTo(width, 0);ctx.lineTo(width, height);}if(direction == 'top'){      //下圆角ctx.lineTo(0, height);//左下角圆弧，弧度从1/2PI到PI  ctx.lineTo(0, 0);//左上角圆弧，弧度从PI到3/2PIctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);//上边线  ctx.lineTo(width - radius, 0);//右上角圆弧  ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);ctx.lineTo(width, height)}ctx.closePath();},selseimg(){  //绘制海报// if(that.userdata.text.length>3){   //昵称太长加省略号//    that.userdata.text=that.userdata.text.slice(0,3)+"..."// }let image = this.headImg;//图片地址let qrcode = this.qrCode;//小程序码址址let filePath = '';uni.showLoading({title: '生成海报中'});const context = uni.createCanvasContext('firstCanvas')this.roundRect(context, 0, 0, that.cansWidth, that.cansHeight, 10, '#fff','all')console.log('1');uni.downloadFile({//将图片保存为本地临时文件url: image,success(res) {console.log('2');console.log(res,123);// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {context.drawImage(res.tempFilePath,580*rpx,30*rpx,80*rpx,80*rpx)  //海报背景uni.downloadFile({ url: qrcode,success(ress) {if (ress.statusCode === 200) {//绘制图形that.roundRect(context, 0,380*rpx,690*rpx,420*rpx, 10, '#f7f7f7','bottom')context.drawImage(ress.tempFilePath,200*rpx,420*rpx,290*rpx,290*rpx)  //个人信息背景context.setFillStyle('#333333')context.setFontSize(22*rpx)context.fillText(that.str, (that.cansWidth - context.measureText(that.str).width) / 2, 750*rpx)context.setFontSize(28*rpx)context.fillText(that.companyName,30*rpx,60*rpx)context.setFillStyle('#000')context.setFontSize(32*rpx)context.font = `normal bolder ${32*rpx}px Arial,sans-serif`context.fillText(that.realName,30*rpx,140*rpx)context.setFillStyle('#999')context.setFontSize(24*rpx)context.fillText(that.jobName,30*rpx,180*rpx)context.setFillStyle('#666')context.setFontSize(22*rpx)context.fillText(that.industryName,30*rpx,260*rpx)context.fillText(that.phone,30*rpx,300*rpx)context.draw()that.hasPost = trueuni.hideLoading();}}})}},fail(err) {uni.showToast({title: err.errMsg,icon: 'none',duration: 2000})uni.hideLoading();}})},cancel(){this.$emit('cancelPost')},saveCans(e){   //保存海报uni.showLoading({title: '保存海报中'});console.log('保存');let tempRatio = 1.5;// #ifdef H5 || APP-PLUStempRatio = 1;// #endifuni.canvasToTempFilePath({x: 0,y: 0,width:that.cansWidth*tempRatio,height:that.cansHeight*tempRatio,destWidth:that.cansWidth*tempRatio*5,destHeight:that.cansHeight*tempRatio*5,canvasId:'firstCanvas',success: function(res){uni.hideLoading()uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function (red) {uni.showToast({title:'保存相册成功'})that.imgsrc=res.tempFilePathif(e==2){that.showImg = truethat.hasPost = false}},fail(res) {if(res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {uni.showModal({title:'您需要授权相册权限',success(res) {if(res.confirm){uni.openSetting({success(res) {},fail(res) {console.log(res)}})}}})}}});},fail(res) {uni.hideLoading()}},this)}}}
</script><style lang="scss">.coverImg{display: block;width: 690rpx;height: 800rpx;margin: 0 auto;margin-top: 70px;}.tip{margin-top: 40rpx;color: $uni-text-color-inverse;font-size: 28rpx;text-align: center;}.view{width: 100vh;height: 100vh;background: $uni-bg-color;}.post{background: $uni-bg-color-mask;width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 10;}.canvas{width: 690rpx;margin: 0 auto;display: flex;flex-direction: column;}.icon-closewhite{width: 100vw;position: fixed;left: 0;bottom: 40rpx;text-align: center;font-size: 80rpx;color: $uni-bg-color;}.bottom{margin-top: 40rpx;width: 100%;display: flex;justify-content: space-around;}.bottom view{width:310rpx;height: 80rpx;font-size:30rpx;border-radius: 40rpx;line-height: 80rpx;text-align: center;border: 1px solid $uni-bg-color;}.bottom view:first-child{background: $uni-bg-color;color: $uni-text-color;}.bottom view:last-child{color:#FFFFFF;}.imglist{width:100%;padding: 20rpx 0;overflow:auto;/* background-color: #ffffff; */}.imglist view{display:flex;justify-content:space-around;}.imglist image{width:200rpx;height:200rpx;border-radius: 10rpx;}.tishi-box{display: flex;align-items: center;justify-content: space-around;background-color: #FFFFFF;position: fixed;bottom: 0;width: 100%;height:260rpx;background:#FFFFFF;border-radius:20rpx 20rpx 0rpx 0rpx;text-align: center;}.tishi-box view{font-size:28rpx;font-family:PingFang SC;font-weight:500;color:#333333;line-height:50rpx;}.tishi-box image{width:100rpx;height:100rpx;border-radius:50%;}
</style>

:show-menu-by-longpress="1"   //image的属性，按住图片后出现保存和转发的按钮，用于小程序转发图片@click.stop.prevent  //阻止默认行为和冒泡roundRect(ctx, x, y, w, h, r, c,direction) //圆角矩形
//ctx:canvas对象 x:起始水平位置 y:起始垂直位置 w：宽度 h:高度 r:圆角半径 c:矩形背景 direction：圆角位置
drawRoundRectPath(ctx, width, height, radius,direction)   //生成圆角
//ctx:canvas对象 width：宽度 height:高度 radius:圆角半径  direction：圆角位置
direction = 'all'（上下四角都为圆角）
direction = 'top'（上面两个角为圆角）
direction = 'bottom'（下面两个角为圆角）uni.canvasToTempFilePath //canvas生成图片 *5是生产5倍像素的图片

只要把option里面接收的参数补充完就能看到效果：

uniapp小程序生成名片海报相关推荐

小程序绘制海报的那些问题——记录一次uniapp小程序生成分享海报的问题及解决
最近做了一个需求,一个推广活动,在小程序中生成推广海报并且支持保存在手机相册,UI稿中呈现的是一个非全屏的固定宽高的海报图片,在保存的时候遇到了如下问题并一一解决 [问题1]开发者工具中可以正常绘制海 ...
uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
小程序生成分享海报，带小程序码，并保存图片
小程序生成分享海报,带小程序码话不多说,先上效果图效果图不是重点,海报基本都是大同小异,都是一些信息,加上一个小程序码,重点是如何将所有要素整合成跟效果图一样的图片.我们知道如果是H5的话,有ht ...
微信小程序生成(painter)海报
这是我目前接触到的比较好用的海报插件了官方还有wxml-to-canvas 不会用有很多标签样式上不去界面化生成,可以直接布局 GitHub 地址这个案例可以直接下载然后打开就是一个小程序, ...
微信小程序生成清晰海报并保存到本地
一.导读小程序海报分享功能还是很常用,但是查询api发现小程序并没有提供分享到朋友圈的功能,只能实现通过canvas画一张海报然后保存到本地,让用户主动去发朋友圈.今天这里介绍自己如果生成的,有源码 ...
小程序生成分享海报并转发朋友圈（超全版）
前言在使用小程序canvas生成分享海报过程中,学到了一些可以优化的方案,在这里记录一下,方便以后使用文章目录前言屏幕适配字体加粗实现文本的换行 canvas'伪'层级绘制网络图片的绘制 ...
小程序生成分享海报，带二维码可携带参数！
最近开发小程序遇到一个需求,后端提供一个二维码,携带分享参数,前端来生成一个分享海报,下面是部分截图这里我就只说一下点击生成海报的方法,这里调用了第三方插件,直接下载,下载直通车代码下载好了,直接 ...
小程序生成分享海报php配置,小程序生成海报保存分享图片完全指南（包括：头像，文字）...
业务在小程序中生成海报(包括用户头像和自定义文字)并且保存到本地实现思路利用canvas画布,把用户头像和自定义文字定位好,用户点击按钮保存到本地注意事项难点小程序canvas不支持自定义宽 ...
小程序生成分享海报图片并保存相册
文章目录前言一.普通二维码生成二.生成海报图片并保存 1.引入依赖组件 2.生成海报图片 2.1 配置painter海报json 2.2 引入数据构造函数并在适当时间触发生成海报 2.3 弹窗组 ...

uniapp小程序生成名片海报

uniapp小程序生成名片海报

uniapp小程序生成名片海报相关推荐

最新文章

热门文章