序言

前不久做一个小程序生成产品海报功能，用canvas画图将产品信息和二维码信息生成图片，再让用户保存图片到本地，分享到朋友圈。本地调试正常，海报生成也正常。但是真机上却出了问题，原本应该正常显示的产品封面却是空白的。

解决过程

下面是画图代码

goPoster: function () {var that = this;var uid = wx.getStorageSync('uid')var token = wx.getStorageSync('token')wx.showLoading({title: '海报生成中',mask: true,})var data={uid:uid,id:this.data.goods.id,token:token}that.setData({ canvasStatus: true });// 第一张为背景图（本地），第二张为产品图（网络）const arr2 = ['/images/posterbackgd.png', that.data.storeImage];http.postReq('WxCode/creatLimitCode.html', data, function (res) {if (res.code == 10000) {const msgPromotionCode = res.data;const ctx = wx.createCanvasContext('myCanvas');ctx.clearRect(0, 0, 0, 0);wx.downloadFile({url: that.setDomain(msgPromotionCode),success: function (res) {arr2[2] = res.tempFilePath;wx.getImageInfo({src: arr2[0],success: function (res) {const WIDTH = res.width;const HEIGHT = res.height;console.log(WIDTH);ctx.drawImage(arr2[0], 0, 0, WIDTH, HEIGHT);ctx.drawImage(arr2[1], 0, 0, WIDTH, WIDTH);ctx.save();let r = 90;let d = r * 2;let cx = 40;let cy = 990;ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);ctx.clip();ctx.drawImage(arr2[2], cx, cy, d, d);ctx.restore();const CONTENT_ROW_LENGTH = 32;let [contentLeng, contentArray, contentRows] = that.textByteLength(that.data.goods.title, CONTENT_ROW_LENGTH);ctx.setTextAlign('center')ctx.setFontSize(32);let contentHh = 32 * 1.3;for (let m = 0; m < contentArray.length; m++) {ctx.fillText(contentArray[m], WIDTH / 2, 820 + contentHh * m);}ctx.setTextAlign('center')ctx.setFontSize(48);ctx.setFillStyle('red');ctx.fillText('￥' + that.data.goods.price, WIDTH / 2, 890 + contentHh);ctx.draw(true, function () {wx.canvasToTempFilePath({canvasId: 'myCanvas',fileType: 'png',destWidth: WIDTH,destHeight: HEIGHT,success: function (res) {wx.hideLoading();that.setData({posterImage: res.tempFilePath,posterImageStatus: true,canvasStatus: false,actionSheetHidden: !that.data.actionSheetHidden})}})});},})}});} else {util.tips(res.codeMsg)}})},

生成海报：

保存后：

真机调试后结果：

查微信文档上没任何说明，百度后得知图片需要下载下来再调接口drawImage,我的图片是网络图片，微信无法使用，需要先调接口 downloadFilestoreImage，然后拿到临时目录路径，这才是drawImage的第一个参数，其实微信文档虽然没写，但是它引用的参数res.tempFilePaths[0],也说明了问题，只是当时我不知道而已。

const ctx = wx.createCanvasContext('myCanvas')wx.chooseImage({success(res) {ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)ctx.draw()}
})

解决方法

一、图片在当前页未加载，需重新下载

这种情况是我的产品详情页没有加载封面图片，只放上了轮播图，所以需要下载图片
下载时要注意调用的图片地址是否为https，且加到后台配置里面了，否则会报错下载不成功

  //获取海报产品图//微信只能读取本地图片，只能先下载下来，读取临时目录，再去用canvas画下来downloadFilestoreImage: function (img) {console.log(img);var that = this;wx.downloadFile({url: img,success: function (res) {that.setData({storeImage: res.tempFilePath})}});},

二、图片加载了，获取图片信息

这种情况是图片加载过了，并在本地已经有临时目录，所以直接调getImageInfo

         //获取网络图片临时目录pathwx.getImageInfo({src: that.data.goods.cover,success: function (res) {//res.path是网络图片的本地地址let Path = res.path;that.setData({storeImage: Path})},fail: function (res) {}});

完美撒花，这只是踩坑之一，如果有需要生成产品海报源码贴出来的，或者我找机会写一篇关于这个的博文，可以下面留言。

小程序drawImage接口canvas生成产品海报失败相关推荐

微信小程序在苹果手机上生成高像素海报失败白屏
微信小程序中需求,根据屏幕像素生成海报,安卓中正常, 大屏ios机型,比如 pro max,会出现生成的海报白屏,ios15,ios16版本都会,暂未找到解决方案,通过兼容处理,降低像素
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
Canvas绘图在微信小程序中的应用:生成个性化海报 1
一.Canvas应用的背景(个人理解)及基础语法背景从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样 ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...
编程日历小程序，对小程序云开发和生成分享海报的实践
1.起源朋友圈晒的很多的一本日历书<了不起的程序员 2021>,我也买了,很厚,纸质书嘛,现在已经很少看了,加上这是一本日历书,希望是每天都打开看.可实际上的情况是,要么忘记看今天的内容 ...
小程序中使用canvas 生成推广图片——wepy框架
现在小程序不能直接分享到朋友圈,所以另辟蹊径的有了生成 '推广图' 让用户分享到朋友圈的方式就出来了.使用canvas 进行绘图的时候主要用了 ctx.drawImage() API进行绘画,但是c ...
微信小程序 api+前端实现生成分享海报
1.先看效果图,点击分享海报按钮,然后弹出分享海报 2.前端代码这里用的组件有vant组件库还有canvas_drawer(一个画布组件) canvas_drawer下载地址https://gith ...
小程序离屏canvas(createOffscreenCanvas)生成推广海报
小程序离屏canvas(createOffscreenCanvas)生成推广海报离屏canvas调用wx.canvasToTempFilePath报错Failed to execute 'drawI ...
微信小程序使用canvas生成分享海报功能复盘
前言近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...

小程序drawImage接口canvas生成产品海报失败

序言

解决过程

解决方法

一、图片在当前页未加载，需重新下载

二、图片加载了，获取图片信息

小程序drawImage接口canvas生成产品海报失败相关推荐

最新文章

热门文章