[已解决]微信小程序开发canvas 图片操作问题缺少htm

时间：2019-05-07 来源：小程序工厂

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

实际上我们在开发的过程中经常会遇到从网上下载图片然后进行修改的操作，但是我们目前只能下载，在渲染到画布的过程中，利用
drawImage函数进行一些少量的操作，只能设置大小，原点位置等。
在单一图片或者单一矩阵情况下问题不算严重。但是涉及到多个图片或者矩形的时候，我都不知道如何去选址我需要的图片进行操作。比如我的画布中有5张图片，那么我应该如何去选择第3张图片，并对第3张图片进行操作呢，比如旋转，缩放，缩放等操作。
这个问题真的很严重啊

微信小程序开发问题解答

微信小程序开发者回答：

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

微信小程序开发者回答：

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

微信小程序开发者回答：

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

微信小程序开发者回答：

我的需求是保存用户操作之后的结果，比如5个图片，用户操作其中一张图片之后，再把5张图片保存成为一张图片。在微信小程序提供的canvas的api里面并不能准确的识别5张图片的某一张。只能对整个canvas进行操作。
如果按照您的方案，利用 movable-view 组件进行操作之后，在canvas里面获取图片进行保存，但是只能读取到src的画并不能解决问题，我希望的是用户在 movable-view 组件上面操作之后还能记录操作的数据并且发送到canvas保存成为一张图片然后保存到用户手机本地

微信小程序开发者回答：

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

微信小程序开发者回答：

你好刚才我又看了一下文档 CanvasContext.rotate(number rotate)
这个api好像只能旋转整个canvas画布，并不能对画布中的任意矩形或者图像进行旋转，这又回到了当初的问题，没法选择画布中的矩阵的问题

微信小程序开发者回答：

const ctx = wx.createCanvasContext('Workbench');
ctx.drawImage('1.jpg', 0, 0, 150, 150);
ctx.drawImage('2.jpg', 100, 0, 150, 150);
ctx.rotate(20 * Math.PI / 180)
ctx.draw();
这样是无效的

微信小程序开发者回答：

这个要解决很多方法啊~
你要画这个旋转了的图的时候，可以先反向旋转画布，然后画上图，再把画布旋转回来。
或者可以找另一个canvas，把canvas旋转了，把图画上去，然后把canvas保存成临时文件，再画到主canvas上

微信小程序开发者回答：

你需要先rotate 再drawImage才行哦

微信小程序开发者回答：

事实上这样子并没有用，画布旋转之后把全部内容都旋转了，我希望的是只旋转画布里面的图片或者矩阵。
期待官方的回复

微信小程序开发者回答：

你画图前，旋转画布，画图片，旋转回画布，继续后面的。。是我表达能力有问题吗。。

本文网址：http://www.91bianli.com/kaifazhinan/74752.html

上一篇：微信小程序canvas.fillText如何出现不同的样式文字

下一篇：picker省市里面没有港澳台

微信小程序开发

[已解决]微信小程序开发canvas 图片操作问题 缺少htm

微信小程序开发问题解答

[已解决]微信小程序开发canvas 图片操作问题缺少htm