使用画布创建图像模板

I would like to create an image template using html5 canvas element, something like this.

我想使用html5 canvas元素创建一个图像模板,就像这样。

CSS has the 3d transform option, but that is only possible in the DOM and will not make any changes in the image. So i figured I should go with canvas.

CSS具有3d变换选项,但这只能在DOM中进行,并且不会对图像进行任何更改。所以我想我应该选择画布。

My idea is : 1) Create a canvas with a picture which has a transparent part. 2) Make another canvas on top of the first one, and position it on the transparent area with the .drawImage method. 3) Perspective transform the second image so it fits perfectly on the transparent area.

我的想法是:1)创建一个带有透明部分的图片的画布。 2)在第一个画布的顶部制作另一个画布,并使用.drawImage方法将其放置在透明区域上。 3)透视变换第二个图像,使其完全适合透明区域。

Now the first two are child steps, but the third one covers 3D manipulation, and I would need some ideas for that.

现在前两个是子步骤,但第三个是3D操作,我需要一些想法。

Any help is much appreciated.

任何帮助深表感谢。

1 个解决方案

#1

It's possible, but it's tricky as you said.

这是可能的,但正如你所说的那样棘手。

Drawing multiple images in layers onto a canvas is not a problem and there's a way to set a 2D transformation matrix with setTransform (see MDN)

在图层中将多个图像绘制到画布上不是问题,并且可以使用setTransform设置2D变换矩阵(请参阅MDN)

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d')

var img = new Image()
img.src= 'https://upload.wikimedia.org/wikipedia/commons/4/4e/2-pt-sketchup.jpg'

ctx.drawImage(img, 0, 0,512,341)

var img2 = new Image()
img2.src = 'https://placeholdit.imgix.net/~text?txtsize=13&txt=230%C3%9750&w=70&h=80'

ctx.setTransform(1, Math.tan(Math.PI/-9), 0, 1, 0, 90);
ctx.drawImage(img2, 309, 135)

I'm not sure how to do a proper 3D transform with that one, but I'm sure there's somebody out there who does?

我不确定如何使用那个进行适当的3D变换,但我确定有人在那里做什么?

#1