小程序分享朋友圈cavans(随机切换背景图片)

最新推荐文章于 2024-07-22 18:18:11 发布
最新推荐文章于 2024-07-22 18:18:11 发布
阅读量742 收藏 1
点赞数
分类专栏： 微信小程序开发 文章标签： js 前端 php 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42802778/article/details/104184846
版权

做了个微信小程序的分享朋友圈，第N次做了，记录下来吧

第一次在CSDN上写博客，写的不好凑活着看吧

js代码

const app = new getApp();

Page({

/**

* 页面的初始数据

*/

data: {

selected: [],

posterDakaCount:0,

posterDakaName: '',

posterNickName: '',

showPosterImage: true

},

onLoad: function (options) {

// this.showPoster();

},



onShow: function () {

var _this = this;

app.sendRequest({

url: 'Collect/getmemberid',

data: {},

success: function (res) {

if (res.code == 0) {

_this.setData({

member_id: res.data

})

}

}

})

// this.savePoster();

},

//小程序分享好友

onShareAppMessage: function (res) {

var member_id = this.data.member_id;

if (res.from === 'button') {

// 来自页面内转发按钮

} else {

// 来自菜单栏转发按钮

}

return {

title: '海蓝风加油',

path: '/pages/index/index/index?member_id=' + member_id,

// 设置转发的图片

imageUrl: '/images/2.jpg',

// 成功的回调

success: (res) => { },

// 失败的回调

fail: (res) => { },

// 无论成功与否的回调

complete: (res) => { }

}

},

//弹出层关闭

hidemengceng: function(){

var that = this;

that.setData({

showPosterImage: true

})

},

// 弹出打卡海报

showPoster: function () {

var that = this;

that.setData({

showPosterImage: false

})

app.sendRequest({

url: 'Kaoshi/getimgs',

success: function (res) {

var data=res.data;

if (res.code == 0) {

// console.log(data.mouth)

that.setData({

posterNickName: data.nickName,

year: data.year,

mouth: data.mouth,

days: data.days,

continuous_days: data.continuous_days,

datas:data

})

that.savePoster();

//背景图片

wx.getImageInfo({

src: data.downloadPosterBg,

success: function (res) {

that.setData({

posterBackground: res.path

})

}

})







}

}

})



},

//绘制cavans图片方法

savePoster: function () {

// 获取背景图片信息

var that = this;

var data = that.data.datas;

let promise1 = new Promise(function (resolve, reject) {

wx.getImageInfo({

src: data.downloadPosterBg,

success: function (res) {

resolve(res);

}

})

});

//获取头像信息

let promise2 = new Promise(function (resolve, reject) {

wx.getImageInfo({

src: data.downloadHeaderImage,

success: function (res) {

resolve(res);

}

})

});

//获取二维码

let promise3 = new Promise(function (resolve, reject) {

wx.getImageInfo({

src: data.downloadQRImage,

success: function (res) {

resolve(res);

}

})

});

//es6中类似于事件写法



Promise.all([

promise1, promise2, promise3

]).then(res => {

console.log(res)

wx.hideLoading()

wx.showLoading({

title: '分享图片生成中...',

icon: 'loading',

duration: 1000

})

/* 图片获取成功才执行后续代码 */

var canvas = wx.createCanvasContext('hoCanvas')

// 绘制背景图

canvas.drawImage(res[0].path, 0, 0, 300, 375);

console.log(that.data.mouth)

//绘制年月日

canvas.setFontSize(24)

canvas.setFillStyle('#fff')

canvas.fillText(that.data.year, 20, 60, 160)

canvas.fillText('/', 60, 90, 160)

canvas.fillText(that.data.mouth, 40, 120, 160)

canvas.fillText('/', 60, 150, 160)

canvas.fillText(that.data.days, 40, 180, 160)

// 绘制活动二维码

canvas.save()

canvas.setFillStyle('#fff')

canvas.fillRect(0, 370, 300, 150)

// restore to the previous saved state

canvas.setFontSize(12)

canvas.setFillStyle('#424E75')

canvas.fillText('长按识别二维码', 190, 435, 160)

canvas.fillText('连续打卡天数', 20, 435, 160)

canvas.setFontSize(23)

canvas.setFillStyle('#000')

canvas.fillText('DAY', 20, 475, 160)

canvas.setFontSize(28)

canvas.setFillStyle('red')

// var

canvas.fillText(that.data.continuous_days, 80, 475, 160)

canvas.drawImage(res[2].path, 215, 445, 50, 50)

// 绘制头像

// canvas.save()

canvas.setFillStyle('#fff')

canvas.fillRect(10, 335, 280, 80)

canvas.restore()



// canvas.fillRect(0, 370, 300, 300)

// // (10, 310, 280, 60)



// canvas.fill()

// canvas.arc(50, 740, 30, 0, 2 * Math.PI)

// canvas.arc(32, 350, 30, 0, 2 * Math.PI)

// canvas.clip()

canvas.drawImage(res[1].path, 45, 355, 40, 40);

canvas.restore()

//绘制微信昵称文本

canvas.setFontSize(12)

canvas.setFillStyle("#424E75")

canvas.setStrokeStyle('#424E75')

canvas.fillText(that.data.posterNickName, 100, 365, 160)

// 绘制打卡昵称

canvas.setFontSize(14)

canvas.setFillStyle("#424E75")

canvas.setStrokeStyle('#424E75')

canvas.fillText(that.data.posterDakaName, 110, 390)

canvas.draw()

setTimeout(function () {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 375 * wx.getSystemInfoSync().pixelRatio, //导出图片的宽

height: 680 * wx.getSystemInfoSync().pixelRatio, //导出图片的高

destWidth: 375*wx.getSystemInfoSync().pixelRatio, //绘制canvas的时候用的是px， 这里换算成rpx ，导出后非常清晰

destHeight: 680*wx.getSystemInfoSync().pixelRatio, //同上 px 换算成 rpx

// canvasId: 'mycanvas',

quality:'1',

canvasId: 'hoCanvas',

success: function (res) {

that.setData({

postUrl: res.tempFilePath,

})

// that.saveImageToAlbum();

// wx.hideLoading()

},

fail: function (res) { }

})

}, 2000)

})

},

//保存图片

saveImageToAlbum: function () {

var that = this;

//将图片保存到相册

wx.saveImageToPhotosAlbum({

filePath: that.data.postUrl,



success(res) {

wx.showModal({

title: '保存成功',

content: '图片成功保存到相册了，快去分享朋友圈吧',

showCancel: false,

confirmText: '好的',

confirmColor: '#818FFB',

success: function (res) {

if (res.confirm) {

that.setData({

showPosterImage: true

})

}

}

})

}

})

},

})

wxml部分

<view class="fxbox">

<button open-type="share" style="background-color: #fff">

<image src="/images/share_weixin.png"></image>

发送给朋友

</button>

<button bindtap="showPoster" style="background-color: #fff">

<image src="/images/share_pyq.png"></image>

分享到朋友圈

</button>

</view>

<view class="mengceng" hidden="{{showPosterImage}}">

<!-- <canvas canvas-id="hoCanvas" style="width:300px;height:520px;margin:auto;margin-top:30rpx;"></canvas> -->

<canvas canvas-id="hoCanvas" style="height:510px;margin:auto;margin-top:5%" class="canvas"></canvas>



<image src="/images/close.png" bindtap='closeShare' style="width:40rpx;height:40rpx;margin:auto;" class='bottoms' bindtap="hidemengceng"></image>



<view class="btnbox">

<button bindtap="saveImageToAlbum" style="font-size:28rpx;background:blue">保存并分享朋友圈</button>

</view>



</view>

wxss代码

page{background: #fff;}

.calendar-box {

/* position: absolute;

top: 0;

left: 0; */

background: #fff;

z-index: 999;

margin:20rpx;

box-sizing: border-box;

border-radius:10rpx;

box-shadow: 0 10rpx 10rpx rgba(0,0,0,.1)

}

.calendar-wrapper {

width: 100%;

border-top: 1px #f5f5f5 solid;

box-sizing: border-box;

font-size: 26rpx;

background: #fff;

}

.share{

width: 300px;

height: 380px;

position: fixed;

left: 0;

right: 0;

top: 0;

bottom: 100rpx;

margin: auto;

}

.btn-box{

padding: 1060rpx 60rpx 0 60rpx;

}

.bottom{

width: 300px;

height: 40px;

background-color: white;

}

.bottom image {

  width: 70rpx;

  height: 70rpx;

  margin-left: 45%;

  margin-top: 2%;

}

.header {

display: flex;

justify-content: center;

align-items: center;

position: relative;

height: 100rpx;

/* width: 100%; */

background: #fff;

/* padding: 0 30rpx; */

z-index: 10000;

}

.top-jiantou {

width: 100rpx;

height: 100rpx;

text-align: center;

box-sizing: border-box;

line-height: 100rpx;

}

.iconfont {

display: flex;

justify-content: center;

align-items: center;

position: relative;

color: #52b8f5;

width: 53rpx;

height: 53rpx;

}

.iconfont .left, .iconfont .right {

display: block;

width: 0;

height: 0;

border-top: 20rpx solid transparent;

border-bottom: 20rpx solid transparent;

}

.iconfont .left {

border-right: 40rpx solid transparent;

}

.iconfont .right {

border-left: 40rpx solid transparent;

}

.iconfont .left.color {

border-right-color: #fff;

}

.iconfont .right.color {

border-left-color: #fff;

}

.btn {

margin: 0 30rpx;

width: 240rpx;

height: 53rpx;

border: 1rpx solid #52b8f5;

border-radius: 26rpx;

color: #52b8f5;

font-size: 26rpx;

box-sizing: border-box;

}

.calendar-panel {

position: relative;

display: flex;

align-items: center;

justify-content: center;

font-size: 32rpx;

height:150rpx;

background: #31a4ff;

border-radius:10rpx 10rpx 0 0;

}

.backtoday {

position: absolute;

right: 0;

top:50rpx;

padding: 0 10rpx;

padding-left: 20rpx;

height: 50rpx;

line-height: 50rpx;

border: 1px #fff solid;

border-right: none;

font-size: 28rpx;

border-top-left-radius: 50rpx;

border-bottom-left-radius: 50rpx;

color: #fff;

background: rgba(82, 184, 245, 0.1);

}

.date-befor, .date-after {

/* border: 1px red solid; */

display: flex;

justify-content: center;

align-items: center;

height: 80rpx;

width: 80rpx;

text-align: center;

line-height: 80rpx;

}

/* .date-after {

margin-left: 20rpx;

} */

.calendar-panel-box {

display: flex;

color:#fff;

font-size:40rpx

}

.calendar-header {

display: flex;

border-bottom:1px dashed #9de4ff;

}

.calendar-header view {

width: 100%;

text-align: center;

line-height: 80rpx;

color: #333;font-size:34rpx;

}

.calendar-body {

display: flex;

flex-wrap: wrap;

border-bottom: 1px #f5f5f5 solid;

padding-bottom:40rpx;

padding-top:20rpx;

}

.calender-body-date-week {

display: flex;

width: 100%;

}

.date {

position: relative;

width: 100%;

text-align: center;

color: #1c1c1c;

background: #fff;

line-height:100rpx;

font-size: 34rpx

}

.date.active {

background: red;

}

.placeholder {

color: #a4a4a4;

}

.date-current {

background: #52b8f5;

color: #fff;border-radius:50%;

}

.data-circle {

width: 14rpx;

height: 28rpx;

border-right:2px solid #ff5a5f;

border-bottom:2px solid #ff5a5f;

transform: rotate(40deg);

position: absolute;

bottom:20rpx;

left: 12rpx;

right: 0;

margin: auto;

}

.flex-center {

display: flex;

align-items: center;

justify-content: center;

}

.total-card{font-size:40rpx;color:#777;text-align: center;padding:50rpx 0 30rpx 0;}

.bottom{overflow: hidden;position: relative;margin-top:50rpx;color:#666;}

.bottom .continuous{font-size:40rpx;float:left;width:50%;text-align: center;padding-top:20rpx;}

.bottom .continuous text{font-size:80rpx;color:#31a4ff;padding-right:10rpx;}

.packup {

position: absolute;

right:6%;

bottom:0;

color: #31a4ff;

border:3rpx solid #31a4ff; display: inline-block;border-radius:10rpx;padding:10rpx 50rpx;font-size:30rpx;

}

.mengceng{

width: 100%;

height: 100%;

position: fixed;

z-index: 9999;

background: rgba(0,0,0,.5);

top: 0;

}

.fxbox{display: flex;justify-content:space-between;width:50%; position: absolute;top:970rpx;right:30rpx;}

.fxbox>button{font-size: 21rpx;text-align: center;border: none;padding-top: 10rpx;}

.fxbox>button image{width:50rpx;height:50rpx; display:block;margin: auto; }

.bottoms{position: absolute; right:4.5%;top:2%; z-index: 9999999!important;}

.btnbox{ width: 100%;text-align: center;margin-top: 30rpx;}

.btnbox button{ display: inline-block!important;background-color: #31a4ff!important;color:#fff}

以上就是完整的代码了

看下效果图吧

在这里插入图片描述

呵呵_博客
关注
专栏目录
【微信小程序】canvas画布设置背景图片
牛哞哞杂记
12-12 1万+
canvas画布设置背景图片 功能： canvas画布设置背景图片 代码： wxml文件 注意：canvas-id=“canvas” <!--index.wxml--> <view class="container"> <canvas style="background-color:#ddd" canvas-id="canvas"> </canva...
微信小程序 canvas涂鸦制作【有背景图】
qq_41261218的博客
10-12 1734
将canvas背景颜色设置成透明，底下渲染一张定位好的背景图。每次手指离开手机屏幕当作一次操作，然后保存成临时文件，用作回退。预览时先将背景图渲染上去，然后再将最后一张保存的临时文件渲染上去，就是带背景图片的涂鸦了，不需要背景图片的话将画布颜色设置成。1. 用户自定义画笔大小。4. 回退和清空功能。2. 更换涂鸦颜色。
微信小程序-CANVAS写入图片素材、文字等数据生成图片
最新发布
羽筠的博客
07-22 2206
微信小程序-CANVAS写入图片素材、文字等数据生成图片 微信小程序中，CANVAS写入图片素材、文字等数据生成图片，最终可将生成的 base64 格式图片保存至相册操作 Tips： 1、canvas 标签默认宽度 300px、高度 150px canvas 生成图片时，写入图片素材、文字等数据前，需要根据实际需求，设置 canvas 宽、高， 如以下示例中 设置 posterCanvas.width 及 posterCanvas.height 2、同一页面中的 canvas-id 不可重复，如果
微信小程序海报功能（canvas）- - -附效果图
换日线的博客
05-11 1520
效果图如下所示 .wxml <canvas canvas-id="shareBox"></canvas> .wxss canvas{ width: 100%; height: 100vh; overflow: hidden; } .js Page({ data: { deviceWidth:'', deviceHeight:'', }, onShow:function(e){ //绘制canvas图片 var that .
微信小程序分享功能imageUrl带随机分享图片
氏张
10-15 9656
//此为微信小程序分享 onShareAppMessage: function(options) { //先写一个数组, var shareimg =[ “https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/01/ChMkJ1mhRcaISLHUAAaIAQtVJyoAAf_UAJK9e8ABogZ224.jpg”, “https://des...
【小程序】canvas生成海报图以及一些canvas的小技巧
杨小花的一日一记
08-08 5947
存稿
微信小程序简单的canvas裁剪图片功能详解
10-16
微信小程序的canvas裁剪图片功能可以让开发者在小程序中实现图片的裁剪操作，适用于需要图片处理的各种场景，比如用户头像编辑、图片分享等。在微信小程序中，Canvas API提供了丰富的绘图接口，可以帮助开发者绘制...
微信小程序实现的canvas合成图片功能示例
12-29
本文实例讲述了微信小程序实现的canvas合成图片功能。分享给大家供大家参考，具体如下： 先要获取图片的信息 然后将需要合成的内容用canvas绘制出来，得到一个合成好的画布，接下来用 wx.canvasToTempFilePath 把...
微信小程序自定义组件实现图片单指拖动双指缩放效果
03-18
在微信小程序中，自定义组件是开发者为了复用代码、提高开发效率而创建的一种功能模块。...通过熟练掌握这些技术，开发者可以轻松地在微信小程序中构建出具有高级交互功能的图片查看组件，提升用户体验。
微信小程序canvas拖拽、截图组件功能
01-03
先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-… readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 ...
微信小程序demo：基于canvas的动态柱状图
03-15
微信小程序是一种轻量级的应用开发平台，主要针对移动端，提供了丰富的API和组件，使得开发者能够快速构建具有原生体验的应用。在这个"微信小程序demo：基于canvas的动态柱状图"项目中，我们将深入探讨如何利用HTML5...
uni-app使用canvas制作海报并保存到本地相册（超级详细）
qq_61869009的博客
12-26 4696
分析案例图都有哪些元素 1.渐变背景 2.圆形头像 3.文字 4.文字超出换行 5.图片居中 6.文字居中 7.单位适配 8.弹窗保存图片。因为一个个绘制图形太麻烦所以这里都采用了方法封装。 canvas api介绍 最后有全部代码，复制即用。 data数据 1.单位适配 拿到当前设备宽度用来做整个canvas的单位适配。这里根据要求高度是不变的，因为高度适配的话不同设备下最后生成的canvas 图片会被压缩。 3.圆形头像 增加了阴影的效果 5.文字超出换行 6.图片居中 这里是中间的背景图比较简单
微信小程序，倒计时，变化图片，随机显示一个区间数字，对应显示图片
weixin_43118088的博客
07-26 2938
小程序，倒计时，变化图片，随机显示一个区间数字，对应显示图片 为了让我们的时钟，或者倒计时的数字，好看点，设计通常会用图片代替数字， 那我们在做小程序的时候，具体该怎么做呢； 我的方法是改变image里面src里面的图片名，这种方法代码简洁，看着很容易 具体的文档我就不在啰嗦了下面是我写的一大个例子：. 我的场景需求是： 随机显示5000到50000区间的数字，为什么要做成这样，这样做想表达什么-...
微信小程序图片显示以及动态数据修改（五六）
shanliyiyeren的博客
10-10 2403
1、图片显示 在小程序项目文件的根目录下新建一个img文件件用于存放该小程序用到的图片文件。在显示图片时，图片的src="../../img/图片名.jpg"。 //.wxml文件 <view> <images src="../../img/1.jpg" style="图片的设置" /> </view> 2、修改数据 在点击某个组件时触动函数修改数据时，应注意在要修改的数据前需要加上this.data.数据名。 //....
（小程序）canvas 绘制图片做背景（新手向）
weixin_49602763的博客
05-19 2232
小程序绘制图片为背景，首先我们需要把图片先下载下来（这里最好是封装一个函数，因为背景不可能只有一张的）下面是代码，一般直接复制就能使用，有可能需要微调。
微信小程序Canvas画图片，合成图片，微信头像合成,变更国庆头像，头像增加背景
Ocean_Point
10-10 1878
微信小程序Canvas画图片，合成图片，微信头像合成,变更国庆头像，头像增加背景
微信小程序canvas画图
热门推荐
impossible1994727的博客
07-16 2万+
基础写起来太没动力了，也写得乱七八糟的，还是直接解决一些小问题比较方便，代码的方方面面的细节都会详尽的解释一下。 1、下面介绍一下canvas的画图，我这个简单一点，画一个带图文的背景图，图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个<canvas>标签，一定要写上canvas-id='canvas的id'，这是必须条件，如下面代码： <...
使用js+canvas实现全平台图片滑块验证代码详解
"使用JavaScript和Canvas实现图片滑块验证的详细教程及代码实例" 在Web开发中，为了增强网站的安全性，经常会使用各种验证方法，其中图片滑块验证是一种常见的用户交互验证方式。本文将深入探讨如何使用JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值