收藏
回答

将两个canvas中的数据放在一个canvas中合成一张图片

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows v1.02.1902010

- 当前 Bug 的表现

canvasA、canvasB,在canvasB中进行无规则裁剪操作,使用canvasToTempFilePath API把canvasB指定区域的内容导出生成指定大小的图片,将导出的图片使用drawImage API绘制到canvasA中,再使用drawImage API绘制一张图片到canvasA中,两次都使用draw(true)进行绘制,最后使用canvasToTempFilePath API把canvasA指定区域的内容导出生成指定大小的图片。



// 将裁剪画布内容保存

wx.canvasToTempFilePath({

    x: 0,

    y: 0,

    width: 320,

    height: 320,

    destWidth: 320,

    destHeight: 320,

    canvasId: 'clipCanvas',

    success: res => {

        //清洗相框画布

        //frameCanvas.clearRect(0, 0, 320, 320);

        console.log('裁剪图:'+res.tempFilePath);

        // 绘制裁剪图到相框画布

        frameCanvas.drawImage(res.tempFilePath, 0, 0, 320, 320);

        frameCanvas.draw();

        

        // 绘制相框图到相框画布

        console.log('相框图:'+this.data.framePic);

        frameCanvas.drawImage(this.data.framePic, 0, 0, 320, 320);

        frameCanvas.draw(true);

        // 保存相框画布内容为图片

        wx.canvasToTempFilePath({

            x: 0,

            y: 0,

            width: 320,

            height: 320,

            destWidth: 320,

            destWidth: 320,

            canvasId: 'frameCanvas',

            success: res => {

                console.log('合成图:'+res.tempFilePath);

                // 关闭裁剪层,更新数据

                this.setData({

                clipImagePath: res.tempFilePath,

                isClip: false

                });

        

                // 将裁剪图绘制到产品上

                this.drawClipImageToGoods();

           }

        }, this);

    }

}, this);







真机测试iOS和Android都没有问题,开发工具有问题。


最后一次编辑于  2019-03-06
回答关注问题邀请回答
收藏

2 个回答

  • 邱一欢
    邱一欢
    2019-03-06

    .draw() 是异步的, 在draw()的回调函数里面保存图片

    2019-03-06
    有用 1
    回复 1
    • han
      han
      2019-03-08



      将第二次绘制不放在第一次绘制的回调中,保证图片放在第二次绘制的回调中,最后看画布结果没问题,但是第二次绘制回调不执行。

      最后只能在第一次绘制回调中执行第二次绘制,再在第二次绘制回调中保存图片,这样就解决了。刚开始根据你的提示在第二次绘制的回调中保存图片没成功就没试,只能先忙别的了,非常感谢。


      2019-03-08
      回复
  • 是小白啊
    是小白啊
    2019-03-06

    麻烦提供下代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-03-06
    有用
    回复
登录 后发表内容