微信小程序之海报生成

前言：2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

<!-- 海报 -->
<view catchtouchmove="preventTouchMove" class="canvasMain" hidden="{{!posterDatas.show}}"><canvas type="2d" id="firstCanvas" class="firstCanvas" style="width:{{posterDatas.width}}px;height:{{posterDatas.height}}px;"></canvas><button wx:if="{{posterDatas.buttonType==1}}" class='button' bindtap='onDownloadImges'>点击保存，分享朋友圈</button><button wx:if="{{posterDatas.buttonType==2}}" class='button'>已保存到相册，快去分享吧</button><button wx:if="{{posterDatas.buttonType==3}}" class='button' open-type='openSetting' bindopensetting='onBindOpenSetting'>进入设置页，开启“保存到相册”</button><image bindtap='onIsCanvas' class='x' src='/pages/images/x3.png'></image>
</view><view class="canvas2d" catchtap='onBuildPosterSaveAlbum'>立即生成</view>

page {background-color: #fff;
}/* 海报 */
.canvasMain {display: flex;flex-direction: column;justify-content: center;align-items: center;align-content: center;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 9999;
}.canvasMain canvas {margin-bottom: 40px;
}.canvas2d {width: 300rpx;height: 80rpx;font-size: 28rpx;color: #000;display: flex;align-items: center;justify-content: center;border: 2rpx solid #000;margin: 0 auto;
}
.canvasMain .button {height: 80rpx;width: 600rpx;background-color: rgba(0, 0, 0, 0.3);border-radius: 40px;color: #fff;font-size: 16px;line-height: 80rpx;display: flex;align-items: center;justify-content: center;
}.canvasMain .x {width: 15px;height: 15px;margin-top: 10px;border: solid 2px #fff;border-radius: 50%;padding: 10px;
}

// pages/huabu/huabu.js
Page({/*** 页面的初始数据*/data: {//海报posterDatas: {width: 300, //画布宽度height: 350, //画布高度// 缓冲区，无需手动设定pic: null,buttonType: 1,show: false, // 显示隐藏海报弹窗success: false, // 是否成功生成过海报canvas: null, // 画布的节点ctx: null, // 画布的上下文dpr: 1, // 设备的像素比},},/*** 生命周期函数--监听页面加载*/onLoad(options) {var that = this;//生成海报初始化var posterDatas = that.data.posterDatasconst query = wx.createSelectorQuery()query.select('#firstCanvas').fields({node: true,size: true},function (res) {const canvas = res.nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = posterDatas.width * dprcanvas.height = posterDatas.height * dprctx.scale(dpr, dpr)posterDatas.canvas = canvasposterDatas.ctx = ctxposterDatas.dpr = dpr//存储that.setData({posterDatas})}).exec()},//海报生成//画布 生成 海报[海报]onBuildPosterSaveAlbum: function () {var that = this;var posterDatas = that.data.posterDatasvar canvas = posterDatas.canvasvar ctx = posterDatas.ctx//已生成过海报的直接显示弹窗if (posterDatas.success) {posterDatas["show"] = true;that.setData({posterDatas})return;}posterDatas.show = true;that.setData({posterDatas})wx.showLoading({title: '海报生成中',mask: true});//二维码var promise1 = new Promise(function (resolve, reject) {const photo = canvas.createImage();photo.src = "https://img0.baidu.com/it/u=2529320505,1328670466&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500";photo.onload = (e) => {resolve(photo);}});//获取图片信息Promise.all([promise1]).then(res => {// 绘制白色背景// util.roundRect(ctx, 0, 0, posterDatas.width, posterDatas.height, 10);ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, canvas.width, canvas.height);//绘制[商品图片]ctx.drawImage(res[0], 0, 0, posterDatas.width, 300);//名称//底部说明ctx.font = "bold 15px Arial"; //字体大小ctx.fillStyle = "#000"; //字体颜色ctx.textAlign = "center"ctx.fillText('海报已生成', 155, 330);// 关闭loadingwx.hideLoading();//显示海报posterDatas.success = true;that.setData({posterDatas})}).catch(err => {console.log(err)wx.hideLoading();wx.showToast({icon: 'none',title: '海报生成失败,请稍后再试.',})})},//画布 转 图片[海报]onCanvasBuildImges: function () {var that = this;var posterDatas = that.data.posterDatas;wx.canvasToTempFilePath({canvas: posterDatas.canvas,width: posterDatas.width,height: posterDatas.height,destWidth: posterDatas.width * 3,destHeight: posterDatas.height * 3,success: function success(res) {posterDatas["pic"] = res.tempFilePath;that.setData({posterDatas})that.onDownloadImges();},fail: function complete(e) {wx.hideLoading();wx.showToast({icon: 'none',title: 'sorry 保存失败,请稍后再试.',})return;}});},//下载图片[海报]onDownloadImges: function () {wx.showLoading({title: '保存中',mask: true});var that = this;var posterDatas = that.data.posterDatas;if (!posterDatas.pic) {that.onCanvasBuildImges();return;}//可写成函数调用 这里不做解释wx.saveImageToPhotosAlbum({filePath: posterDatas.pic,success(res) {wx.hideLoading();wx.showToast({icon: 'none',title: '已保存到相册，快去分享吧',})posterDatas["buttonType"] = 2;that.setData({posterDatas})},fail: function (res) {wx.hideLoading();wx.showToast({icon: 'none',title: '进入设置页，开启“保存到相册”',})posterDatas["buttonType"] = 3;that.setData({posterDatas})return;}})},//在打开授权设置页后回调onBindOpenSetting: function () {var that = this;var posterDatas = that.data.posterDatas;posterDatas["buttonType"] = 1;that.setData({posterDatas})},//隐藏海报[海报]onIsCanvas: function () {var that = this;var posterDatas = that.data.posterDatas;posterDatas["buttonType"] = 1;posterDatas["show"] = false;that.setData({posterDatas})},//自定义弹窗后禁止屏幕滚动（滚动穿透）[海报]preventTouchMove: function () {//在蒙层加上 catchtouchmove 事件//这里什么都不要放},
})

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

微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
uniapp 微信小程序分享海报
uniapp 微信小程序分享海报下面是一个Uniapp微信小程序分享海报的简单示例: 在Uniapp项目中创建一个新的页面,用于展示要分享的内容和生成海报.例如,我们可以在新页面中显示一张图片和一些 ...
微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
微信小程序：检讨书生成微信小程序源码
对于经常写检讨的小伙伴来说,福音来了因为这是一款检讨书生成小程序所以再也不用为了写检讨而烦恼了哦支持自定义字数下线,主题自定义支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...
微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
微信小程序实现画布生成海报功能
微信小程序可以通过使用标签来实现生成海报的功能.以下是基本实现步骤: 1.在 WXML 文件中创建一个标签,并设置其宽度和高度属性.' <canvas canvas-id="myC ...
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码
各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码.核销码等等. 那么,小程序端该如何生成二维码图片呢? 效果如下: weapp-qrcode.js 小伙伴们可以来 ...
微信小程序合成海报_利用微信小程序中Canvas API来合成海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下其他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToT ...

微信小程序之海报生成

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

最新文章

热门文章