小程序离屏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)生成推广海报相关推荐

  1. 微信小程序,使用canvas画图生成海报并保存手机相册

    需求:需要根据背景图片和用户的微信的头像和昵称,生成一张海报图,并保存到手机相册. 首先在画布上绘制海报背景图片,然后再绘制头像.昵称和挑战成功的信息. 代码如下: getImageInfo() {r ...

  2. 小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈

    小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈 一.概述 需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...

  3. 小程序 坚屏_如何构建坚如磐石的应用程序

    小程序 坚屏 不同的应用程序设计选项概述 (An overview of different app design options) When we design software, we const ...

  4. 微信小程序webview页面使用painter生成海报

    微信小程序webview页面使用painter生成海报 因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...

  5. 微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)

    微信小程序之使用canvas给微信头像加小红旗 情境:新中国成立70周年,普天同庆.昨天看到朋友圈中被刷屏的@官方微信 给自己的头像加小红旗.服务器被卡爆,很多朋友说换头像不成功. 任务:打算自己写一 ...

  6. 在H5、微信小程序中使用canvas绘制二维码、分享海报

    在H5.微信小程序中使用canvas绘制二维码.分享海报 文章目录 在H5.微信小程序中使用canvas绘制二维码.分享海报 前言 一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...

  7. 微信小程序 - 骨架屏

    骨架屏 - "与其等待网络加载,不如提前给点暗示" 注:不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示 ...

  8. 微信小程序全屏背景图

    微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...

  9. 微信小程序-首屏视频加载

    项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用 获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...

最新文章

  1. 知识图谱和图分析与可视化
  2. Java JDK 11:现在可以使用所有新功能
  3. Parcelable最强解析
  4. c#.net2005 调用evc4.0生成的dll文件
  5. 如何用ThreadLocals射击自己
  6. 武书连2019中国大学排行榜公布:浙大排名超越北大
  7. 我是如何2小时弄出房产网站小程序的?
  8. 中国城市乞丐的五大经典表情
  9. Solving environment: failed
  10. Python地理数据处理 十二:栅格数据读写
  11. java如何解压rar文件怎么打开_java解压RAR压缩文件
  12. ESP32 学习笔记(七)I2S - Inter—IC Sound
  13. 复杂sql语句:按部门统计人数
  14. 阿里云对象存储(oos)
  15. C# DirectX 使用例子
  16. java电影定票系统_Java实现电影院订票系统代码
  17. Navicat 快捷键查询
  18. Teardrop代码编程
  19. 追踪货拉拉:“亡羊补牢”进度缓慢,安全“地雷”何时能拆完?
  20. 送书 | 教你下载B站指定视频

热门文章

  1. 中国电信4g最快服务器IP,中国电信DNS IP地址大全(32个省)
  2. java Excel导出工具类
  3. 当勺子遇到“黑科技”,竟可尝百味
  4. 兔老大的系统设计(一)健康度系统
  5. Python基础语法笔记
  6. IAR打开软件,很多文件找不到
  7. WML信息查询与后端信息发布系统实现-java -(报告+源码)
  8. 第一周,人工智能学习总结
  9. 基于AutoJs抖音极速版辅助App
  10. 怎么关闭vivo系统自检_科技资讯:vivo手机中软件的自启动功能怎么关闭