javascript - 如何使图像适合边缘？html5 画布 javascript

Question

http://i.stack.imgur.com/4oAYt.png

这是不插入图像时的原始图像。它有空白图像

http://i.stack.imgur.com/aupwr.png

我想知道如何使图像曲线适合边缘（在红色圆圈中，图像适合边缘）。

什么框架可以做到这一点？

• 拉斐尔
• 面料
• 动力学

谢谢大家帮助我。抱歉英语不好。最良好的问候。

Answer 1

在一个方角附近

您可以使用剪切变换来产生矩形图像围绕角形成的错觉。剪切变换是将矩形徽标图像放在矩形“3d”框上的方式。对于“剪切”效果，您可以使用您提到的任何好的库……或者甚至只使用画布本身。但是，剪切效果为您提供了锐利的折痕边缘变换，而不是曲线变换。这是一个例子： http ://www.createjs.com/#!/EaselJS/demos/transform

在一个弯曲的角落

但是对于真正的弯曲变换，您将需要 webGL 或执行透视变换的图像处理库。

查看基于服务器的 ImageMagick 工具，特别是查看此页面上的3d 框、透视分层部分： http ://www.imagemagick.org/Usage/distorts/#methods

引用 imagemagick.org 页面：

该图像是通过拍摄动漫视频盒盖的 [矩形] 图像创建的，将该封面分成 3 段（“封面”、“脊椎”和“背面”），分别将每个部分扭曲成分层图像。然后通过添加高光和阴影效果（使用 HardLight 图像合成）以及添加边框和半透明阴影效果（使用 CopyOpacity）来完成图像。

您也可以在 Photoshop 中执行此操作——可能要容易得多；）

• 将您的徽标图像和手机壳分别放入 Photoshop 中。
• 使用“自由变换”将图像旋转到与手机壳相同的角度。
• 在“自定义”模式下使用“变形”将图像包裹在手机壳周围（网格有助于引导您）。
• 您的手机壳中没有太多的照明，但在叠加模式下使用“混合”让您转换后的图像呈现手机壳的亮点。