微信小程序分享生成海报

本文转自：微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园

html：

<view><image src="{{img}}" class='bgImg'></image><text class='mine'>我的邀请码</text><text class='code'>{{code}}</text><text class='who'>谁邀请你一起吃面?</text><view class='inputBox'><input placeholder='输入朋友的验证码' class='input' bindinput='bindKeyInput'/><button bindtap='btnclick' class='btn'>提交</button></view><text class='tishi'>输入朋友的邀请码，朋友和你各自获得通用优惠券1张</text><text class='shareText'>生成海报分享至</text><view class='imgBox'><button open-type="share" class='zfbtn'><image src="{{wechat}}" class='img'></image></button><button class='zfbtn m_l' bindtap='formSubmit'><image src="{{quan}}" class='img'></image></button></view><!--生成海报  --><!-- <view class="img-box"></view> --><view class='imagePathBox' hidden="{{maskHidden == false}}"><image src="{{imagePath}}" class='shengcheng'></image><button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button></view><view hidden="{{maskHidden == false}}" class="mask"></view> <view class="canvas-box"><canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/></view>
</view>

css部分：

.bgImg{display: block;width: 100%;height: 366rpx;
}
.mine{display: block;text-align: center;color: #333;margin-top: 44rpx;
}
.code{display: block;text-align: center;color: #333;font-size: 76rpx;font-weight: bold;margin-top: 30rpx;
}
.who{display: block;margin-top: 80rpx;font-size: 32rpx;color: #333;text-align: center;
}
.inputBox{text-align: center;margin-top: 44rpx;
}
.input{text-align: center;width: 440rpx;height: 88rpx;border-radius: 44rpx;background: #f5f5f5;font-size: 32rpx;display: inline-block;
}
.btn{width: 160rpx;height: 88rpx;border-radius: 44rpx;background:linear-gradient(90deg,rgba(255,226,0,1),rgba(255,200,11,1));box-shadow: 0px 4px 8px 0px rgba(255,200,11,0.5); color:#333;font-size: 32rpx;display: inline-block;line-height: 88rpx;margin-left: 40rpx;
}
button[class="btn"]::after {border: 0;
}
.tishi{display: block;text-align: center;color: #999;margin-top: 30rpx;
}
.shareText{display: block;text-align: center;color: #333;font-size: 28rpx;margin-top: 100rpx;
}
.imgBox{text-align: center;width: 100%;margin-top:60rpx;padding-bottom: 120rpx;
}
.img{display: inline-block;width: 100%;height: 100%;
}
.m_l{margin-left: 180rpx;
}
.zfbtn{display: inline-block;width: 120rpx;height: 120rpx;border-radius: 50%;background: transparent;outline: none;border: 0;padding: 0;
}
button[class="zfbtn"]::after {border: 0;
}
button[class="zfbtn m_l"]::after {border: 0;
}
.imagePathBox{width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;
}
.shengcheng{width: 80%;height: 80%;position: fixed;top: 50rpx;left: 50%;margin-left: -40%;z-index: 10;
}
.baocun{display: block;width: 80%;height: 80rpx;padding: 0;line-height: 80rpx;text-align: center;position: fixed;bottom: 50rpx;left: 10%;background: #ffe200;color: #333;font-size: 32rpx;border-radius: 44rpx;
}
button[class="baocun"]::after{border: 0;
}

js部分：

// pages/prize/prize.js
const app = getApp()
Page({/*** 页面的初始数据*/data: {img:"../../images/gobg.png",wechat:"../../images/wechat.png",quan:"../../images/quan.png",code:"E7AI98",inputValue:"",maskHidden: false,name:"",touxiang:"",code: "E7A93C"},//获取输入框的值bindKeyInput:function(e){this.setData({inputValue: e.detail.value})},//点击提交按钮btnclick:function(){var text = this.data.inputValuewx.showToast({title: text,icon: 'none',duration: 2000})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;wx.getUserInfo({success: res => {console.log(res.userInfo,"huoqudao le ")this.setData({name: res.userInfo.nickName,})wx.downloadFile({url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源success: function (res) {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {console.log(res, "reererererer")that.setData({touxiang: res.tempFilePath})}}})}})},//将canvas转换为图片保存到本地，然后将图片路径传给image图片的srccreateNewImg: function () {var that = this;var context = wx.createCanvasContext('mycanvas');context.setFillStyle("#ffe200")context.fillRect(0, 0, 375, 667)var path = "/images/gobg.png";//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片//不知道是什么原因，手机环境能正常显示context.drawImage(path, 0, 0, 375, 183);var path1 = that.data.touxiang;console.log(path1,"path1")//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片var path2 = "/images/txquan.png";var path3 = "/images/heise.png";var path4 = "/images/wenziBg.png";var path5 = "/images/wenxin.png";context.drawImage(path2, 126, 186, 120, 120);//不知道是什么原因，手机环境能正常显示// context.save(); // 保存当前context的状态var name = that.data.name;//绘制名字context.setFontSize(24);context.setFillStyle('#333333');context.setTextAlign('center');context.fillText(name, 185, 340);context.stroke();//绘制一起吃面标语context.setFontSize(14);context.setFillStyle('#333333');context.setTextAlign('center');context.fillText("邀请你一起去吃面", 185, 370);context.stroke();//绘制验证码背景context.drawImage(path3, 48, 390, 280, 84);//绘制code码context.setFontSize(40);context.setFillStyle('#ffe200');context.setTextAlign('center');context.fillText(that.data.code, 185, 435);context.stroke();//绘制左下角文字背景图context.drawImage(path4, 25, 520, 184, 82);context.setFontSize(12);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("进入小程序输入朋友的邀请", 35, 540);context.stroke();context.setFontSize(12);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("码，朋友和你各自获得通用", 35, 560);context.stroke();context.setFontSize(12);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("优惠券1张哦~", 35, 580);context.stroke();//绘制右下角扫码提示语context.drawImage(path5, 248, 578, 90, 25);//绘制头像context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆context.strokeStyle = "#ffe200";context.clip(); //裁剪上面的圆形context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图context.draw();//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function (res) {var tempFilePath = res.tempFilePath;that.setData({imagePath: tempFilePath,canvasHidden:true});},fail: function (res) {console.log(res);}});}, 200);},//点击保存到相册baocun:function(){var that = thiswx.saveImageToPhotosAlbum({filePath: that.data.imagePath,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {if (res.confirm) {console.log('用户点击确定');/* 该隐藏的隐藏 */that.setData({maskHidden: false})}},fail:function(res){console.log(11111)}})}})},//点击生成formSubmit: function (e) {var that = this;this.setData({maskHidden: false});wx.showToast({title: '装逼中...',icon: 'loading',duration: 1000});setTimeout(function () {wx.hideToast()that.createNewImg();that.setData({maskHidden: true});}, 1000)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;wx.getUserInfo({success: res => {console.log(res.userInfo, "huoqudao le ")this.setData({name: res.userInfo.nickName,})wx.downloadFile({url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源success: function (res) {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {console.log(res, "reererererer")that.setData({touxiang: res.tempFilePath})}}})}})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function (res) {return {title:"这个是我分享出来的东西",success:function(res){console.log(res,"转发成功")},fail:function(res){console.log(res,"转发失败")}}}
})

微信小程序分享生成海报相关推荐

微信小程序分享生成海报（自带二维码）+头像+昵称
前言: 我的分享海报是弹框,可根据自己要求写成页面,原理都是一样的,背景图是前期测试的,效果是OK的,真机测试手机也是显示的. 效果图: wxml: <vi ...
微信小程序 - 分享商品海报
我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀 ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
微信小程序/uni-app生成海报功能@令狐张豪
使用技术栈:uni-app 使用官方文档提供的API:createCanvasContext(uni-app) /CanvasContext(原生) *注意:海报里用到的图片都得先使用小程序提供的下载 ...
微信小程序实现生成海报并且保存本地
首先使用微信小程序提供的canvasapi将第二张图显示的海报画出来然后调用保存本地的接口 wx.saveImageToPhotosAlbum({})将图片保存在本地相册中首先我们需要在页面上创建 ...
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
微信小程序之生成海报保存本地
知识都在代码里 index.wxml <view class="canvas-box"><button bindtap="generate"& ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...

微信小程序分享生成海报

微信小程序分享生成海报相关推荐

最新文章

热门文章