小程序离屏canvas(createOffscreenCanvas)生成推广海报
小程序离屏canvas(createOffscreenCanvas)生成推广海报
离屏canvas调用wx.canvasToTempFilePath报错Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)
开发者工具版本:稳定版1.05.2204180(windows)
调试基础库版本:2.24.0
网上查半天资料一直找不到原因,不知道是不是createOffscreenCanvas不支持wx.canvasToTempFilePath方法,官方文档也没有说明。所以现在是用base64方法来生成海报。
各位如果知道是什么原因,麻烦告知一下哈!
--------------------------------------------------------------- 分割线 ---------------------------------------------------------------
背景图片
效果图
getPoster: async function (e) {let that = this// 文件管理let fs = wx.getFileSystemManager();try {// 判断文件是否存在,如果存在则直接显示图片fs.accessSync(`${wx.env.USER_DATA_PATH}/images/sharePoster.jpg`);this.setData({src: `${wx.env.USER_DATA_PATH}/images/sharePoster.jpg`})// 获取(缓存)背景图片的md5let sharePoster_md5 = wx.getStorageSync('sharePoster_md5');// 如果缓存不存在则重新生成海报if (!sharePoster_md5) {wx.showModal({title: "提示",content: "海报已更新,请重新生成!",showCancel: false,complete(res){// 删除缓存的图片fs.unlink({filePath: `${wx.env.USER_DATA_PATH}/images/sharePoster.jpg`,success(res) {console.log(res)// 重新调用该函数that.getPoster()},fail(res) {console.error(res)}})}})}else{// 背景图片的md5存在,请求后端对比服务器的背景图片的md5是否一致,如果不一致,则需要重新生成海报let md5 = await App.req.request('https://XXX.com/getSharePoster_md5.php', {md5: sharePoster_md5})if (md5.data !== 1) {wx.showModal({title: "提示",content: "海报已更新,请重新生成!",showCancel: false,complete(res){fs.unlink({filePath: `${wx.env.USER_DATA_PATH}/images/sharePoster.jpg`,success(res) {console.log(res)that.getPoster()},fail(res) {console.error(res)}})}})}}} catch (e) {// 生成分享海报wx.showLoading({title: '正在生成分享码',mask: true})try {// 判断目录是否存在fs.accessSync(`${wx.env.USER_DATA_PATH}/images/`);console.log('目录存在');} catch (e) {// 目录不存在,创建目录try {fs.mkdirSync(`${wx.env.USER_DATA_PATH}/images/`, false)console.log("创建目录成功");} catch (error) {console.log("创建目录失败", error);wx.hideLoading();wx.showModal({title: "提示",content: "生成失败,请重试!",showCancel: false})throw false;}}// 请求后端生成小程序码(带参数)let img = await App.req.request('https:/XXX.com/getQRCode.php', {userId: App.data.userInfo.userId});img = img.dataconsole.log("小程序码", img);// 获取背景图片信息(该接口会将图片加载到本地,但不会保存)let imageInfo = await App.wxp.getImageInfo({src: "https://XXX.com/sharePoster.jpg"});console.log("图片信息", imageInfo);// 判断生成小程序码和获取海报图片信息是否成功if (img.status === 1 && imageInfo.path) {// 创建离屏canvaslet canvas = wx.createOffscreenCanvas({type: '2d',width: imageInfo.width, // canvas的宽度为"背景图片"的宽度height: imageInfo.height // canvas的高度为"背景图片"的高度});// 获取canvas上下文let context = canvas.getContext('2d')// 创建小程序码图片let QRCode = canvas.createImage();// 赋值图片地址QRCode.src = img.base64// 创建海报背景图片let sharePoster = canvas.createImage()sharePoster.src = imageInfo.pathsharePoster.onload = e => {context.clearRect(0, 0, canvas.width, canvas.height);// 将背景图片绘制到canvas画布context.drawImage(sharePoster, 0, 0, imageInfo.width, imageInfo.height, 0, 0, imageInfo.width, imageInfo.height);// 将小程序码绘制到canvas画布(先绘制背景图片再绘制小程序码,所以小程序码会在背景图片上面)// coordinateX,coordinateY是将小程序码绘制在背景图片的X坐标和Y坐标,坐标我是从后端传过来的,你们根据自己的背景图片来定这个坐标context.drawImage(QRCode, 0, 0, img.width, img.height, img.coordinateX, img.coordinateY, img.width, img.height)// 将canvas画布内容转base64let base64 = context.canvas.toDataURL('image/png');// 删除base64字符串的空格base64 = base64.replace('data:image/png;base64,', '');// 删除base64字符串的回车符和换行符base64 = base64.replace(/[\r\n]/g, '');try {// 将base64数据写入jpg文件(writeFile第一个参数是保存文件的路径,第二个参数是需要写入的数据,第三个参数是指定写入文件的编码,这里一定要用base64,这里一定要用base64,这里一定要用base64)fs.writeFileSync(`${wx.env.USER_DATA_PATH}/images/sharePoster.jpg`, base64, 'base64');// 没有报错,写入文件成功that.setData({src: `${wx.env.USER_DATA_PATH}/images/sharePoster.jpg`})// 获取背景图片的MD5值并存入缓存(用于判断当前海报的背景图片跟服务器的背景图片是否一致,如果则重新生成海报)fs.getFileInfo({filePath: imageInfo.path,complete(res){console.log("成功",res);if(res.digest){wx.setStorage({key: "sharePoster_md5",data: res.digest})}}})} catch (err) {console.log("生成失败",err);// 写入文件失败wx.showModal({title: "提示",content: "生成失败,请重试!",showCancel: false})}wx.hideLoading();}} else {// 生成小程序失败或获取图片信息失败wx.hideLoading();wx.showModal({title: "提示",content: "生成失败,请重试!",showCancel: false})}}},
小程序离屏canvas(createOffscreenCanvas)生成推广海报相关推荐
- 微信小程序,使用canvas画图生成海报并保存手机相册
需求:需要根据背景图片和用户的微信的头像和昵称,生成一张海报图,并保存到手机相册. 首先在画布上绘制海报背景图片,然后再绘制头像.昵称和挑战成功的信息. 代码如下: getImageInfo() {r ...
- 小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈
小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈 一.概述 需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
- 小程序 坚屏_如何构建坚如磐石的应用程序
小程序 坚屏 不同的应用程序设计选项概述 (An overview of different app design options) When we design software, we const ...
- 微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报 因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
- 微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)
微信小程序之使用canvas给微信头像加小红旗 情境:新中国成立70周年,普天同庆.昨天看到朋友圈中被刷屏的@官方微信 给自己的头像加小红旗.服务器被卡爆,很多朋友说换头像不成功. 任务:打算自己写一 ...
- 在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报 文章目录 在H5.微信小程序中使用canvas绘制二维码.分享海报 前言 一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
- 微信小程序 - 骨架屏
骨架屏 - "与其等待网络加载,不如提前给点暗示" 注:不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示 ...
- 微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
- 微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用 获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
最新文章
- 知识图谱和图分析与可视化
- Java JDK 11:现在可以使用所有新功能
- Parcelable最强解析
- c#.net2005 调用evc4.0生成的dll文件
- 如何用ThreadLocals射击自己
- 武书连2019中国大学排行榜公布:浙大排名超越北大
- 我是如何2小时弄出房产网站小程序的?
- 中国城市乞丐的五大经典表情
- Solving environment: failed
- Python地理数据处理 十二:栅格数据读写
- java如何解压rar文件怎么打开_java解压RAR压缩文件
- ESP32 学习笔记(七)I2S - Inter—IC Sound
- 复杂sql语句:按部门统计人数
- 阿里云对象存储(oos)
- C# DirectX 使用例子
- java电影定票系统_Java实现电影院订票系统代码
- Navicat 快捷键查询
- Teardrop代码编程
- 追踪货拉拉:“亡羊补牢”进度缓慢,安全“地雷”何时能拆完?
- 送书 | 教你下载B站指定视频