如何使图像适合边缘？ html5 canvas javascript

Question

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

未插入图像时为原始图像。 它有空白图像

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

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

框架可以做什么？

• 拉斐尔
• fabricjs
• 动力学

谢谢大家的帮助。 对不起，英语不好。 最良好的问候。

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中。
• 使用“自由变换”将图像旋转到与手机壳相同的角度。
• 在“自定义”模式下使用“变形”将图像包裹在手机外壳上（网格可为您提供指导）。
• 手机壳没有太多照明，但是在覆盖模式下使用“混合”，可以使变换后的图像呈现在手机壳的亮点上。