Question

很想听听其他人的想法。

我想有这个场景......

用户上传图片（使用php轻松完成我选择的脚本语言）
然后他们可以在他们的浏览器中裁剪图像，但不仅仅是一个子选择的矩形，以便能够跟踪，例如，然后“剪切”或“隔离”它们，以便它们可以添加到不同的背景例如。

所以闪存是第一个想到的东西，但我想避免这种情况（并保持iPad友好）所以我想这留下了html5 / css3 / JavaScript，可能最重要的是html画布。

我更愿意避免使用java等任何东西并将其保留为简单的Web技术？

我有一个快速的谷歌，但似乎什么都没有跳。

建议欢迎!!

Answer 1

你可以使用canvas，特别是剪切路径：

var img = new Image();
var context = canvas.getContext('2d');

img.onload = function(){
  context.beginPath();
  context.moveTo(10,10);
  context.lineTo(300,200);
  context.lineTo(100,150);
  context.clip();
  context.drawImage(img, 0,0)
}

img.src = 'example.png';

当然，您需要编写一些允许用户设置点的UI。您可以直接从<input>通过input.files[0]和FileReader API获取图片，然后将其与XHR2一起发送，或者在将其上传到服务器后获取。

以非线性/矩形方式在网页上裁剪图像，使任何形式的多边形

1 个答案: