赋予二维图像定制以产生真实视图

Question

是否可以在 2d 图像上添加 image/text 以便给出真实的 view.For 示例，如：http://www.zazzle.com/make_your_own_iphone_5_case-179092402149274498.

Answer 1

这些视图是正交和等轴测视图，可以在 canvas 中使用仿射变换进行复制，因为它们也是平行四边形。

首先你需要为不同的情况制作面具。这些需要以与 "photo" 中的情况相同的方向绘制。在您希望自定义图形显示的地方使用实心像素（任何颜色都可以，它不会在后面的步骤中显示），在其他任何地方使用透明像素（抗锯齿像素很好）。

然后在canvas、select合成模式"source-in"中绘制遮罩以替换非透明像素，最后select混合模式"multiply" 并在顶部绘制案例 "photo" 以混合阴影和高光。后一步会产生图像具有深度的错觉。

对于等距视图，计算倾斜角度（如果您不确定图像是否准确，则使用试错法 - 根据经验，通常是 tan(60°)，即。 transform(1, 0, Math.tan(60/180*Math.PI), 1, 0, 0)), 然后做与上面相同的过程。请记住在绘制自定义图像时仅应用变换，必须在不进行变换的情况下绘制蒙版和顶层。

可以使用 x 轴的缩放比例生成正交侧视图。根据哪个角度，在外壳的侧面添加条纹。

步骤示例

var img = new Image(),
    cust = new Image(),
    count = 2,
    ctx = document.querySelector("canvas").getContext("2d");
img.onload = cust.onload = comp;
img.src = "http://i.stack.imgur.com/je0Jh.png";
cust.src = "http://i.stack.imgur.com/uRPDt.png";

function comp() {
  if (--count) return;
  
  // draw in mask
  ctx.drawImage(img, 0, 0);
  
  // comp. mode source-in
  ctx.globalCompositeOperation = "source-in";
  
  // draw in custom graphics
  ctx.drawImage(cust, 0, 0, ctx.canvas.width, ctx.canvas.height);

    // blend mode multiply
  ctx.globalCompositeOperation = "multiply";

  // draw in original case multiplied (does not work in IE)
  ctx.drawImage(img, 0, 0);
}

<canvas with=263 height=505></canvas>

质量很大程度上取决于蒙版的质量 - 如您所见，我在这里制作了一个非常快速的版本（顺便说一句，您的案例图像也可以充当蒙版）。

除了倾斜变换外，等轴测视图的步骤相同。乘法在 IE 中不起作用，您可以在此处改用 alpha 或制作一个仅包含阴影等的单独蒙版。

话虽这么说：请记住，这不是发送到生产环境的图像。这只会显示最终结果的表示。使用的是图像，图像位置和大小。然后使用这些数据构建一个未屏蔽的平面打印模板，该模板用于制作 phone-案例。

赋予二维图像定制以产生真实视图

Give 2d image customization to produce real view

html5-canvas

步骤示例