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

Question

I am new to HTML5 canvas. 我是HTML5画布的新手。 I have a image of a cup, I am rendered that in canvas. 我有一个杯子的图像，我在画布上呈现。

This is image of cup : 这是杯子的形象：

在此输入图像描述

Now I am trying render another image (My photo that is in normal rectangular size) in upload your design area of this image. 现在我正在尝试渲染另一个图像（我的照片，这是正常的矩形大小）上传您的图像的设计区域。 How can I render this image which looks like that image on cup? 如何在杯子上渲染看起来像该图像的图像？

I want to get the final image like this : 我想得到这样的最终图像：

在此输入图像描述

I am uses canvas element to upload the image. 我使用canvas元素上传图像。

 <!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>

JS JS

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';

Answer 1

You want your second image to "warp" and appear as if it's wrapped around the cup. 你希望你的第二张图像“扭曲”并且看起来好像它已经缠绕在杯子周围。

You cannot warp your second image into a curved image using "out-of-the-box" context 2d 您无法使用“开箱即用”上下文2d将第二张图像变形为曲线图像

Using html Canvas 2d Context, you can only do quadrilateral skewing. 使用html Canvas 2d Context，你只能做四边形偏斜。 Therefore, after skewing an image each opposing side will always be parallel. 因此，在倾斜图像之后，每个相对侧将始终平行。

Therefore, you cannot get your image to warp into a curved image using "out-of-the-box" context 2d. 因此，您无法使用“开箱即用”的上下文2d将图像变形为弯曲图像。

A few workarounds...You can use an offscreen temporary canvas to "warp" your second image into a curve. 一些解决方法......您可以使用屏幕外临时画布将第二个图像“扭曲”成曲线。 Then you can draw that curved image on top of the cup image using context.drawImage. 然后，您可以使用context.drawImage在杯子图像的顶部绘制该曲线图像。 Here are 2 alternatives that let you "fake" curvature of an image. 这里有两个选项可以让你“伪造”图像的曲率。

Alternative #1: Texture Mapping 备选方案＃1：纹理映射

You can use texture mapping to apply perspective curvature to your second image: 您可以使用纹理贴图将透视曲率应用于第二个图像：

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

Alternative #2: Vertically slice and stretch 备选方案＃2：垂直切片和拉伸

You can vertically slice your second image to create perspective curvature. 您可以垂直切割第二个图像以创建透视曲率。 You can use the resizing capability of context.drawImage to "stretch" pixels into your curved shape like in this previously Stackoverflow answer: How to make rooftext effect and valley text effect in HTML5 (or Fabric.js) 您可以使用context.drawImage的大小调整功能将像素“拉伸”到您的弯曲形状，就像之前的Stackoverflow答案：如何在HTML5（或Fabric.js）中制作屋顶文字效果和谷文字效果

jsfiddle.net/AbdiasSoftware/e8hZy/ jsfiddle.net/AbdiasSoftware/e8hZy/

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

问题描述

1 个解决方案

解决方案1
1 2013-11-28 16:59:53

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

问题描述

1 个解决方案

解决方案1 1 2013-11-28 16:59:53

解决方案1
1 2013-11-28 16:59:53