createShare: function () { let that = this; let unit = that.data.screenWidth / 375; let context = wx.createCanvasContext('canvas', this); that.setData({ 'canvasHidden': false }); wx.downloadFile({ url: app.globalData.imageUrl + '/inviteFriend.png', success: function (res) { console.log(res); that.setData({ 'inviteFriend': res.tempFilePath }) console.log(parseInt(that.data.screenWidth)); if (parseInt(that.data.screenWidth) < 375 ){ context.drawImage(that.data.inviteFriend, 0, 0, 320 * parseInt(unit), 530 * parseInt(unit));//背景   }else{ context.drawImage(that.data.inviteFriend, 0, 0, 375 * parseInt(unit), 620 * parseInt(unit));//背景 } context.setFontSize(36 * parseInt(unit)); context.setFillStyle('#02C07B'); context.fillText(that.data.inviteCode + '', 124 * parseInt(unit), 195 * parseInt(unit)); context.setFontSize(14 * parseInt(unit)); context.setFillStyle('rgb(102,102,102)'); context.fillText('我是' + app.globalData.userInfo.nickName, 50 * parseInt(unit), 251 * parseInt(unit)); context.fillText('邀请您', 50 * parseInt(unit), 271 * parseInt(unit)); context.fillText('我的邀请次数有限，赶快加入哦~', 50 * parseInt(unit), 291 * parseInt(unit)); //保存图片 context.draw(false,function () { wx.canvasToTempFilePath({ canvasId: 'canvas', success : function (res) { if (!res.tempFilePath) { wx.showToast({ title: '图片绘制中', icon:'none' }) } console.log(that.data.shareImgPath) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { console.log(res) wx.hideLoading(); that.setData({ canvasHidden: true }) wx.showToast({ title: '图片保存成功', icon: 'success' }); }, fail: (err) => { console.log(err) wx.hideLoading(); that.setData({ canvasHidden: true }) wx.showToast({ title: '图片保存失败', icon: 'none' }) } }) }, fail : function () { wx.showToast({ title: '图片绘制失败', icon: 'none' }) } }, this) }) } }) // console.log(that.data.imageUrl + '/inviteFriend.svg'); } 请各位大神看看是不是我的代码出问题了。 再说一下 我在其他手机上调试都是可以保存的（正常运行）。 下面是保存在iphone5上的空图片。长宽、大小都有，就是显示不出来。 [图片] 以上。

代码： ctx.drawImage('../../images/xxx.svg', 0, 0, width, height); ctx.draw(); 图片是放在项目目录里。 现在的问题是，模拟器上正常绘制，手机上不行（IOS/安卓），没有任何报错 @官方 出来解释一下

getPoster: function (event){ var _this=this; //绘图开始 var ctx_height = _this.data.goods_canvas_height; var ctx_width = _this.data.goods_poster_width; var ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('#fff') ctx.fillRect(0, 0, ctx_width, ctx_height) //店铺头像填充绘制的圆 ctx.setFillStyle('#000') ctx.save() ctx.beginPath() ctx.arc(ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(_this.data.astore_logo_path, 10, 10, ctx_width * 0.14, ctx_width * 0.14) ctx.restore() //店铺名称 ctx.setFontSize(14) ctx.setTextAlign('left') ctx.setTextBaseline('middle') ctx.fillText(_this.data.agent4_info.astore_name ? _this.data.agent4_info.astore_name : _this.data.agent4_info.agent4_name, ctx_width * 0.14 + 20, ctx_width * 0.14 / 2 + 10) var text_start = 10; //自营图标 if (typeof (_this.data.ziying_width) == 'undefined') { var ziying_width = 25; } else { var ziying_width = _this.data.ziying_width / _this.data.ziying_height * 12; } ctx.drawImage(_this.data.ziying_path, text_start, ctx_width * 0.14 + 20, ziying_width, 12) text_start = text_start + ziying_width + 5; //跨境图标 if (_this.data.goods_info.cross_border) { if (typeof (_this.data.kuajing_width) == 'undefined') { var kuajing_width = 25; } else { var kuajing_width = _this.data.kuajing_width / _this.data.kuajing_height * 12; } ctx.drawImage(_this.data.kuajing_path, text_start, ctx_width * 0.14 + 20, kuajing_width, 12) text_start = text_start + kuajing_width + 5; } //商品名换行 ctx.setFontSize(12) ctx.setTextBaseline('top') var temp_text_start = text_start; var chr = _this.data.goods_info.goods_name.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < ctx_width - temp_text_start - 10-10) { temp += chr[a]; } else { temp_text_start = 10; a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 if (row.length > 2) { var rowCut = row.slice(0, 2); var rowPart = rowCut[1]; var test = ""; var empty = []; for (var a = 0; a < rowPart.length; a++) { if (ctx.measureText(test).width < ctx_width - temp_text_start - 10 - 30) { test += rowPart[a]; } else { break; } } empty.push(test); var group = empty[0] + "..."//这里只显示两行，超出的用...表示 rowCut.splice(1, 1, group); row = rowCut; } for (var b = 0; b < row.length; b++) { ctx.fillText(row[b], text_start, ctx_width * 0.14 + 20 + b * 15, 300); ctx.fillText(row[b], text_start + 1, ctx_width * 0.14 + 20 + b * 15, 300); text_start = 10; } //广告 ctx.setFillStyle('#9B9B9B') var adv_txt = _this.data.goods_info.goods_advword ? _this.data.goods_info.goods_advword : (_this.data.goods_info.gc_name + _this.data.goods_info.goods_name) var chr = adv_txt.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; if (ctx.measureText(adv_txt).width < ctx_width - 20) { ctx.fillText(adv_txt, 10, ctx_width * 0.14 + 20 + b * 15) } else { for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < ctx_width - 20 - 30) { temp += chr[a]; } else { temp = temp + "..."; break; } } ctx.fillText(temp, 10, ctx_width * 0.14 + 20 + b * 15) } //商品图片 ctx.drawImage(_this.data.goods_image_path, 0, ctx_width * 0.14 + 20 + (b + 1) * 15+10, ctx_width, ctx_width) //画线 var left_width = parseInt(ctx_width * 0.5328) var bottom_height = parseInt(ctx_height * 0.15) ctx.setFillStyle('#E7E7E7') ctx.fillRect(left_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10, 1, bottom_height) //小程序 ctx.drawImage(_this.data.minipro_code_path, left_width + 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width +5, bottom_height, bottom_height) ctx.setFontSize(10) ctx.setFillStyle('#9B9B9B') ctx.fillText('（长按查看商品）', left_width + 5, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 5 + bottom_height) //国旗 if (_this.data.goods_info.country_id){ if (typeof (_this.data.country_pic_height) == 'undefined') { var country_pic_width = 14 } else { var country_pic_width = _this.data.country_pic_width / _this.data.country_pic_height * 14 } }else{ var country_pic_width=0; } //品牌 ctx.setFontSize(12) ctx.setFillStyle('#000') ctx.setTextAlign('right') var brand_text=''; brand_text += _this.data.goods_info.country_name; if (_this.data.goods_info.country_name && _this.data.goods_info.brand_name){ brand_text += ' | '; } brand_text += _this.data.goods_info.brand_name; var chr = brand_text.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; if (ctx.measureText(brand_text).width < left_width - 20 - country_pic_width) { } else { for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < left_width - 20 - 24 - country_pic_width) { temp += chr[a]; } else { brand_text = temp + "..."; break; } } } ctx.setTextBaseline('top') ctx.fillText(brand_text, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10) if (_this.data.goods_info.country_id){ console.log(left_width - 10 - ctx.measureText(brand_text).width - country_pic_width); console.log(ctx_width * 0.14 + 20 + (b + 1) * 15 + ctx_width); console.log(_this.data.astore_logo_path); ctx.drawImage(_this.data.country_pic_path, left_width - 10 - ctx.measureText(brand_text).width - country_pic_width - 5, ctx_width * 0.14 + 20  + (b + 1) * 15 + 10 + ctx_width + 10, country_pic_width, 14) } //销量 ctx.setFontSize(10) ctx.setFillStyle('#5A5A5A') ctx.setTextAlign('right') ctx.fillText('销量：' + _this.data.goods_info.goods_salenum + '件', left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10+20) //价格 ctx.setFontSize(16) ctx.setFillStyle('#DB2819') ctx.setTextAlign('right') ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25) ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10-1, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25) var text_width = ctx.measureText(String(_this.data.goods_info.goods_agent2price)).width; ctx.setFontSize(10) ctx.setTextAlign('left') ctx.fillText('￥', left_width - 10-12 - text_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25+3) //市场价 ctx.setFontSize(10) ctx.setTextAlign('right') ctx.setFillStyle('#9B9B9B') ctx.fillText('市场价：' + _this.data.goods_info.goods_marketprice, left_width - 10 , ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3+15) //划线 ctx.fillRect(left_width - 10 - ctx.measureText('市场价：' + _this.data.goods_info.goods_marketprice).width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3 + 15 + 5, ctx.measureText('市场价：' + _this.data.goods_info.goods_marketprice).width, 1) ctx.draw() //绘图结束 _this.setData({pop: { poster: 'active' } }); } [图片]

下面这段代码有问题吗？为什么不能裁剪出一个圆出来。。。 [代码]context.save();[代码][代码]context.beginPath();[代码][代码]context.arc(50, 50, 50, 0, 2 * Math.PI);[代码][代码]context.closePath();[代码][代码]// context.fill();[代码][代码]context.clip();[代码][代码]context.fillStyle = [代码][代码]"#900000"[代码][代码];[代码][代码]context.fillRect(0, 0, 200, 200);[代码][代码]context.restore();[代码][代码]context.draw([代码][代码]false[代码][代码]);[代码]如果把注释去掉就可以？为什么 clip 之前需要先 fill 一次呢？ 这个是完完整整复制的 clip 的示例中的代码，仅仅是把示例中的 drawImage 换成了 fillRect 就不行了。真的对你们的 API 很失望！！！ 另外，真机是OK的～

图片流放入画布，出现问题：    开发工具可以显示图片，但是 IOS/安卓手机都显示不出来 wx.request({    url: "https://gxadmin.xqngx.net/mini-game-officer/external/getEwm?wxaccount=rabet",    method: "POST",    success: function (res) {        //请求图片流数据        //放入画布 （开发工具可以显示，IOS/安卓手机都显示不出来）        ctx.drawImage("data:image/jpg;base64," + res.data, 0, 0, 300, 300);        ctx.draw();    } }) [图片] 说是图片资源，没说那么清楚肯定是支持的，所以还是存在 BUG，希望及时修复

imageOnLoad(ev) { console.log(ev); var _this = this; //放大镜效果 var bannerUrl = _this.data.url_com + _this.data.bannerUrl; var wImg = ev.detail.width; var hImg = ev.detail.height; var width = parseFloat(_this.data.width); console.log(bannerUrl); console.log(wImg); console.log(hImg); console.log(width); var ctx = wx.createCanvasContext('myCanvas'); ctx.drawImage(bannerUrl, 0, 0, wImg, hImg, 0, 0, width, width); ctx.draw(); }, [图片] [图片] 域名配置好了，图片是加载完成才绘制的 求大神帮我解答一下！！！！！！！！！！！！！！！！！

[图片]除了这个还有其他吗？

你好！     我在component里使用了一下canvas。但是除了画布显示外，其它所有的绘图都不显示~。

[图片] 这个是我在开发者工具上面生成的小程序码。因为官方api给我返回的是二进制流的数据，我就用blob解码了一下，但是在真机上面，log打印Blob is not defined. [图片] 我现在想问，如何解决真机不支持Blob对象的问题了，以及是否有替代方案

[图片] 在开发者工具没有问题，但是在真机调试中会出现这个报错