做了一个图片裁剪的功能，先上两张图 [图片] 图1. [图片] 图2. 图1：是裁剪之前，黄色背景是canvas, 代码中宽高分别为canvasWidth, canvasHeight 白色的四角框是裁剪区域，代码中的宽高分别为cropRectWidth, cropRectHeight 裁剪区域距画布上边的距离为cropRectTop, 距画布左边的距离为cropRectLeft 图2：是点击裁剪完成之后的照片。红色是image的背景，可以看到照片只被裁剪了一个角。为什么呢? 代码大概流程为： 1、选择一张照片传递给canvas, 2、通过canvasCtx.drawImage(image, dx, dy, dWidth, dHeight)绘制图片，通过计算dx, dy, dWidth, dHeight 的值调整图片大小与位置使其适应裁剪框的大小 3、裁剪图片，将裁剪后的图片显示到image中，以下是裁剪代码： （参数x和y理论上应该就是cropRectLeft与cropRectTop，为什么只裁剪出一个角呢？ 在步骤2中调整图片大小与位置时，给cavasCtx.drawImage()传递的参数dx,dy也是通过cropRectLeft与cropRectTop计算得到的，按理说不应该有错） wx.canvasToTempFilePath({                 x: this.data.cropRectLeft,                 y: this.data.cropRectTop,                 width: this.data.cropRectWidth,                 height: this.data.cropRectHeight,                 destWidth: this.data.cropRectWidth,                 destHeight: this.data.cropRectHeight,                 canvas: this.data.canvas,                 canvasId: "2d",                 success(res){                     console.log("cropComplete = " + res.tempFilePath)                     that.setData({                         croppedImageUrl: res.tempFilePath,                         isCanvasHide: true                     })                 }             }) -------------------------- 以下是完整代码 ---------------------------- https://developers.weixin.qq.com/s/13KbgTmL7wGK

使用最新版OffscreenCanvas裁剪图片， 为了清除上一次对画布进行的translate,rotate等操作，调用 renderingContext.reset()方法对画布进行重置 模拟器上调试通过，但换到真机上报错：renderingContext.reset is not a function [图片] 项目设置如下图： [图片] --------------------- 代码片段如下 --------------------- https://developers.weixin.qq.com/s/n36yjMmm78GE 请求大佬指点

从相册选择照片，然后使用canvas裁剪照片，通过wx.canvasToTempFilePath获取裁剪后的图片临时路径 将裁剪后的临时路径传递给FileSystemManager的saveFileSync()方法，将裁剪后的图片保存到本地， 最后将图片的本地路径传递显示到<image>中 （题外话：为什么不将canvas裁剪的临时路径直接传递给<image> ? 因为实践发现，如果分两次选择图片，后选择并canvas裁剪的图片，会覆盖之前裁剪的图片，即前后两次的临时路径相同） 大概代码如下： wx.canvasToTempFilePath() .then(res => {       return this.saveImage2Local(res.tempFilePath)   }) //... 省略 ... saveImage2Local(tempPath){     console.log("saveImage2Local.tempPath = " + tempPath)          return wx.getFileSystemManager()             .saveFileSync({                 "tempFilePath": tempPath,                 "filePath": "cliped"}) } 报错如下： [图片] 问题1： 运行后log报错："tempFilePath must be a string", 难道tempPath: "http://tmp/...png"不是string吗？该如何修改？ 问题2： saveFileSync中的参数“filePath”设置为“cliped”, 是不是表示图片会被保存到 /xxx/xxx/cliped/目录下？ 问题3： 代码片段中，我在data中定义了OffscreenCanvas对象，想将JS项目改写为TS项目，但是会提示 offscreenCanvas类型不匹配， 尝试过offscreenCanvas: null, offscreenCanvas: '', offscreenCanvas: any 都不行， 到底应该咋写呀？ Page({   data: {     offscreenCanvas: null,   } }) ---------------------------- 以下是代码片段 --------------------- https://developers.weixin.qq.com/s/hJIhhKm77vGN

先从相册拿到照片imageUrl const offscreenCanvas = wx.createOffscreenCanvas({type: '2d', width: canvasWidth, height: canvasHeight}) const renderingContext = offscreenCanvas.getContext('2d') const image = this.data.offscreenCanvas.createImage() image.onLoad =  () => { console.log("image.onLoad 为什么不执行？") // ... 通过wx.canvasToTempFilePath（）获取到裁剪后的图片地址 ... ｝ image.src = imageUrl 以上就是大概流程，但是为什么image.onLoad = () => {//...} 不执行呢？ -------------------- 以下是代码片段 ----------------------------- https://developers.weixin.qq.com/s/81GIyGmE72Gu [图片]

想做一个从相册取得照片，先用OffScreenCanvas裁剪，通过wx.canvasToTempFilePath拿到裁剪后图片地址，然后再显示到wxxl中的<image>的功能， 在社区查询说要在image.onload方法中执行wx.canvasToTempFilePath才能拿到地址，但是我的image.onload方法不执行，是什么原因？ 通过以下代码创建了Image对象 const image = this.data.offscreenCanvas.createImage() 然后给通过以下代码给image传入从相册拿到的图片地址，为什么image.onload不执行呢？ image.onLoad =  () => {     console.log("image.onLoad 为什么不执行？") }         image.src = imageUrl -------- 以下是完整代码 ------------ Page({     /**      * 页面的初始数据      */     data: {         imagePath: '',         clipedImagePath: '',         offscreenCanvas: null,         renderingContext: null,         canvasWidth: 0,         canvasHeight: 0,         canvasHWRatio: 0.0,     },     onLoad(){                 this.data.canvasHWRatio = 1.427         var windowWidth = wx.getSystemInfoSync().windowWidth         var pixelRatio = wx.getSystemInfoSync().pixelRatio         this.data.canvasWidth = windowWidth * pixelRatio         this.data.canvasHeight = Math.ceil(this.data.canvasWidth * this.data.canvasHWRatio)         this.initCanvas()     },     /* 从相册选择照片 */     tapChoose(){         const that = this         wx.chooseMedia({             count: 1,             mediaType: ['image'],             sourceType: ['album'],             maxDuration: 30,             camera: 'back',             success(res) {               console.log("tempFiles = ")               console.log(res.tempFiles)               that.setData({                   imagePath: res.tempFiles[0].tempFilePath               })               that.getClipedImagePath(res.tempFiles[0].tempFilePath)             }           })     }, /* 初始化 OffscreenCanvas */     initCanvas(){         // 创建离屏 2D canvas 实例         const offscreenCanvas = wx.createOffscreenCanvas({type: '2d', width: this.data.canvasWidth, height: this.data.canvasHeight})         // 获取 context。注意这里必须要与创建时的 type 一致         const renderingContext = offscreenCanvas.getContext('2d')         this.data.offscreenCanvas = offscreenCanvas         this.data.renderingContext = renderingContext     },     getClipedImagePath(imageUrl){         console.log("getClipedImagePath 执行")         // 创建一个图片         const image = this.data.offscreenCanvas.createImage()         // 等待图片加载         image.onLoad =  () => {             console.log("image.onLoad 为什么不执行？")         }         image.src = imageUrl              } })

- 当前 Bug 的表现（可附上截图）     错误如下，最开始是     appLaunch with an already exist webviewId 2     每编译一次 webviewId 加 1 [图片] - 预期表现 - 复现路径      - 提供一个最简复现 Demo 项目为新建项目，AppID为测试号，语言选择 TypeScript, 建好项目后，什么也没做，直接编译就出现这个问题