这个img.onload有有加载时间,所以我把绘图的方法抽离出来,写成了promise,这样就能保证图片加载完成之后再做一些事情
Canvas2d wx.canvasToTempFilePath 在什么时候 调用才是最合适的?1首先 我是在整个海报全部绘制完成后 在最后调用了wx.canvasToTempFilePath 发现只有背景 没有图片 2改进方法 定义一个变量 count = 0 在所有绘制图片的地方加上1 循环定时器判断绘制完成的图片的数量和想要绘制的图片数量是否相等,相等则调用,最后发现在模拟器每次都是正常的 但是在真机上 ios13 每次绘制头像的时候count都不会自增 导致数量不相等 不能绘制海报 下面是绘制图片的代码 // 绘制图片 drawImg = (ctx, url, x, y, w, h) => { // 创建图片 const img = this.canvas.createImage() // 设置图片路径 img.src = url img.onload = () => { // 图片加载完成 绘制图片 ctx.drawImage(img, x, y, w, h) this.imgCount++ // 绘制成功一张 把图片的个数+1 console.log(`绘制图片的count` , this.imgCount) } }
2020-03-14canvas2D不支持真机调试
在小程序中引入插件中调用createOffscreenCanvas接口报异常错误,如何解决?微信开发者工具v1.02.1911180 最新版本, 由于camera不支持微信开发者工具调试,所以使用真机调试,手机安装的微信版本7.0.11 在引入插件中调用createOffscreenCanvas接口报2个异常错误 canvas: wx.createOffscreenCanvas() [图片] 2个异常报错的信息如下: appServiceSDKScriptError (unknown) Pt.default.OffscreenCanvas is not a constructor; at wx.createOffscreenCanvas TypeError: Pt.default.OffscreenCanvas is not a constructor at Vt (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:809537) at Object.Wt (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:808231) at Object.f.(anonymous function) (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:888622) at Object.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:587283) at Function.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1401835) at Object.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:541980) at pe.onLaunch (weapp:///app.js:15:18) at pe.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1649604) at new pe (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1650360) at Function.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1650774) thirdScriptError (unknown) Cannot assign to read only property 'btoa' of object '[object Window]';at App lifeCycleMethod onLaunch function TypeError: Cannot assign to read only property 'btoa' of object '[object Window]' at e ([__wxPluginCode__]:1095:45) at Object.exports.setupWechatPlatform ([__wxPluginCode__]:1095:1483) at Object.exports.configPlugin ([__wxPluginCode__]:1071:148) at pe.onLaunch (weapp:///app.js:9:12) at pe.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1649604) at new pe (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1650360) at Function.eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1650774) at eval (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1637680) at eval (weapp:///app.js:7:1) at require (eval at n.call.document (http://127.0.0.1:63151/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1685185)
2020-03-14这个我已经完美解决了,但是出现另一个bug https://developers.weixin.qq.com/community/develop/doc/000886c4e886e8f7c50a7b50859400
canvas在不同手机屏幕兼容?在网上搜到的答案大部分都是用ratio = wx.getSystemInfoSync().windowWidth/375 去实现,虽然在iphoneX系列手机还是会错位,但是至少还可以判断手机是不是iphoneX系列然后做单独处理,现在我是遇到在红米手机出现错位,这真是伤脑筋,怎么解决啊
2020-03-14麻烦看一下我的,看起来是工具的bug: https://developers.weixin.qq.com/community/develop/doc/000886c4e886e8f7c50a7b50859400
小程序真机调试 HTMLCanvasView is not defined?小程序中使用了lottie miniprogram来展示lottie动画 在开发者工具中使用可以展示部分lottie文件,部分lottie文件会报eval is not a function 错误,如图 [图片] 但是,重要的是,开发者工具可以展示的部分lottie动画,在真机无法展示,提示HTMLCanvasView is not defined,如图 [图片] 请问这个问题如何解决?
2020-03-14看不懂英文吗
使用uni-app框架,循环列表,开发工具一直报key的问题?[图片]
2020-03-14不可能一样,显示会变形
画布canvas组件官方示例为什么要乘以设备像素比?canvas组件下,有一段示例代码,如下: <!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas> // canvas.js Page({ onReady() { const query = wx.createSelectorQuery() query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) ctx.fillRect(0, 0, 100, 100) }) } }) 不太理解长宽为什么要乘以dpr,并且画布缩放同样的倍数。我把这些去掉后预览看起来和上面一样: canvas.width = res[0].width canvas.height = res[0].height // ctx.scale(dpr, dpr)
2020-03-11wx.openSetting()不能写在那里,会死循环,你整个逻辑有问题
【问下】wx.openSetting()?wx.getSetting({ success: (res) => { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success: () => { // 同意授权 }, fail: (res) => { // 无法唤醒设置 wx.openSetting() } }) } else { // 已经授权了 } }, fail: (res) => { console.log(res); } })
2020-03-10我用canvas 2d接口,canvasToTempFilePath和saveImageToPhotosAlbum都是空白,参数没有写错
wx.saveImageToPhotosAlbum图片保存相册时,图片为空白?开发工具上,canvas图片绘制成功,在draw()方法上进行回调wx.canvasToTempFilePath,生成临时文件地址也能成功,并且能够正打开(正常显示图片),然后获取权限,调用wx.saveImageToPhotosAlbum,将canvas生成的临时文件保存到手机相册,但真机测试进行保存之后,相册的这张图片是空白,请问这是什么问题,如何解决?
2020-03-08这个方法可以保存出图片,反倒是echarts官方给的保存图表方法,输出的图片是空白 [图片]
canvas 2d 在发者工具中 不能 wx.canvasToTempFilePath?例子: https://developers.weixin.qq.com/s/0sOvZ6mB7Wer 使用 lib 2.10.0 <canvas type="2d" id="canvas" style="width: 300px; height: 300px;"></canvas> wx.canvasToTempFilePath({ canvas: canvas, fileType: 'jpg', quality: 1, success: function(res){ console.log(res.tempFilePath); wx.previewImage({ urls: [res.tempFilePath] }) } }) canvas2d 可以得到 临时文件的path 但是无法打开。在安卓预览时工作正常。 [图片] 开发者工具中,一直是这个样子。 ------------------------------------------------------------------------------ 除此之外, 例子中 <cover-view> 在开发者工具中 无法遮盖 type="2d" 的 canvas 在安卓手机上并无问题。 [图片]
2020-03-08新版canvas 2d接口这样保存,canvas是你的画布实例对象 [图片]
canvas.toTempFilePath()在真机上会修改图片Uint8ClampedArray?将一个画布通过canvas.toTempFilePath()方法保存成文件,然后通过 wx.saveImageToPhotosAlbum方法保存到相册中,其中Uint8ClampedArray(360000)为[图片] 然后我通过wx.chooseImage({ count:1, sizeType: ['original'], success: (res) => { const ctx = wx.createCanvasContext('canvasIn', this); ctx.drawImage(res.tempFilePaths[0], 0, 0,300,300) ctx.draw() 此方法得到图片的像素数组为[图片] 在开发者工具上不会这样,但在真机上会出现这个问题 这是一个bug吗
2020-03-07