收藏
回答

canvas 图片操作问题 缺少html的Image对象

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 canvas 客户端 最新 最新

实际上我们在开发的过程中经常会遇到从网上下载图片然后进行修改的操作,但是我们目前只能下载,在渲染到画布的过程中,利用

drawImage函数进行一些少量的操作,只能设置大小,原点位置等。

在单一图片或者单一矩阵情况下问题不算严重。 但是涉及到多个图片或者矩形的时候,我都不知道如何去选址我需要的图片进行操作。比如我的画布中有5张图片,那么我应该如何去选择第3张图片,并对第3张图片进行操作呢,比如旋转,缩放,缩放等操作。

这个问题真的很严重啊

最后一次编辑于  2018-10-09
回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2018-10-09

    我是这么想的,看得到的部分,用image标签配合movable-view来做。。然后记录缩放的比例,旋转的角度,拖动的位置,在操作完成之后,要保存的时候,再画在canvas上

    2018-10-09
    有用
    回复 10
    • 硬软件开发 周
      硬软件开发 周
      2018-10-09

      如何把dom节点的内容画到canvas里面呢?如果能通过这个办法也是很不错的

      2018-10-09
      回复
    • 卢霄霄
      卢霄霄
      2018-10-09回复硬软件开发 周

      比如你有5个图。那么你界面上看得见的部分其实放的是 movable-view,movable-view里各有一个image标签。。image标签的src知道,就画到canvas上就行啦。有啥不行的地方吗?

      2018-10-09
      回复
    • 硬软件开发 周
      硬软件开发 周
      2018-10-09回复卢霄霄

      我的需求是保存用户操作之后的结果,比如5个图片,用户操作其中一张图片之后,再把5张图片保存成为一张图片。在小程序提供的canvas的api里面并不能准确的识别5张图片的某一张。只能对整个canvas进行操作。

      如果按照您的方案,利用    movable-view 组件进行操作之后,在canvas里面获取图片进行保存,但是只能读取到src的画并不能解决问题,我希望的是用户在  movable-view  组件上面操作之后还能记录操作的数据 并且发送到canvas保存成为一张图片 然后保存到用户手机本地


      2018-10-09
      回复
    • 卢霄霄
      卢霄霄
      2018-10-09回复硬软件开发 周

      可以办到啊,movable-view有bindchange和bindscale。可以获取位置和缩放,然后你根据这个可以画到canvas上去,没问题呀。旋转的话,需要自己做手势监听,然后设给movable-view,这个角度在画图的时候也是已知的啊。

      2018-10-09
      回复
    • 硬软件开发 周
      硬软件开发 周
      2018-10-09回复卢霄霄

      你好 刚才我又看了一下文档 CanvasContext.rotate(number rotate) 

      这个api好像只能旋转整个canvas画布,并不能对画布中的任意矩形或者图像进行旋转,这又回到了当初的问题,没法选择画布中的矩阵的问题


      2018-10-09
      回复
    查看更多(5)
登录 后发表内容