如何使用 html5 画布在杯子上叠加图像答案

【问题标题】：How overlay image over a cup using html5 canvas如何使用 html5 画布在杯子上叠加图像
【发布时间】：2013-12-14 02:23:52
【问题描述】：

我是 HTML5 画布的新手。我有一个杯子的图像，我在画布上渲染了它。

这是杯子的图片：

现在我正在尝试在上传此图片的设计区域时渲染另一张图片（我的照片为正常矩形大小）。如何渲染这个看起来像杯子上的图像的图像？

我想得到这样的最终图像：

我正在使用画布元素上传图片。

 <!DOCTYPE html>
 <html>
 <body>

 <canvas id="myCanvas" width="400" height="400" style="border:5px solid #c3c3c3;">
 Your browser does not support the HTML5 canvas tag.
 </canvas>

 <script src="js/test.js" type="text/javascript"></script>


 </body>
 </html>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

var x = 0;
var y = 0;
var width = 290;
var height = 297;

imageObj.onload = function() {
    context.drawImage(imageObj, x, y);
};

imageObj.src = 'images/cup.jpg';

【问题讨论】：

查看以前的 Stackoverflow 答案。这个问题是关于“扭曲”文本的，但您可以使用相同的技术在杯子周围“扭曲”新图像：stackoverflow.com/questions/19544735/…
感谢您的建议
@markE - 但我想像postimg.org/image/ytw422zi5 这样重叠 - 这怎么可能
如果你能“负担得起”只支持浏览器处理 webgl，你可以试试three.js。 webgl 支持表：caniuse.com/webglthree.js：threejs.org
@user3044649 ，我也有同样的问题，试图找到解决方案...知道如何存档这个或任何例子，你能分享一下吗？谢谢

标签： javascript html html5-canvas

【解决方案1】：

您希望您的第二张图片“变形”并看起来好像它被包裹在杯子上。

您无法使用“开箱即用”上下文 2d 将第二张图像扭曲为弯曲图像

使用html Canvas 2d Context，只能做四边形倾斜。因此，在倾斜图像后，每个相对的边总是平行的。

因此，您无法使用“开箱即用”上下文 2d 将图像变形为弯曲图像。

一些解决方法...您可以使用屏幕外临时画布将第二张图像“变形”为曲线。然后，您可以使用 context.drawImage 在杯子图像上绘制该弯曲图像。这里有 2 种替代方法可以让您“伪造”图像的曲率。

替代方案 #1：纹理映射

您可以使用纹理映射将透视曲率应用于您的第二张图像：

http://archive.gamedev.net/archive/reference/articles/article852.html

备选方案 #2：垂直切片和拉伸

您可以垂直切片第二张图像以创建透视曲率。您可以使用 context.drawImage 的调整大小功能将像素“拉伸”到您的弯曲形状中，就像以前的 Stackoverflow 答案一样：How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

jsfiddle.net/AbdiasSoftware/e8hZy/

【讨论】：