javascript - 使用html5在不同大小的div中上传图像

Question

我想使用 html5 将图像上传到可以是矩形、正方形、圆形或任何形状的框 (div)

类似下面的内容

任何帮助将不胜感激

Answer 1

从你的评论来看，我假设你已经知道如何正常上传和绘制图像，所以我只解释如何在绘制图像时“成形”图像。

看看 compositing settings二维上下文。这些允许您使用路径或图像在 Canvas 上执行 mask 。

1. 以所需的大小将图像绘制到 Canvas 上
2. > create a path它标记了要“切出”的形状的边缘。 3. 将 context.fillColor 设置为没有 alpha 透明度的实体(如果您还没有这样做的话)
3. 设置 context.globalCompositeOperation = 'destination-in'
4. 使用context.fillPath 以destination-in 模式绘制路径。这会删除路径外的所有内容，并保留路径内的所有内容。
5. 设置 context.globalCompositeOperation = 'source-over'` 以恢复正常的绘图行为。