使用html5在不同大小的div中上传图片

Question

我想将图像上传到框（div）中，该框可以是矩形，正方形，圆形或使用html5的任何形状

像下面这样

任何帮助将不胜感激

Answer 1

从您的评论中，我假设您已经知道如何正常地上载和绘制图像，因此，我仅解释在绘制图像时如何使图像“变形”。

看一下2d上下文的合成设置 。 这些允许您使用路径或图像在画布上执行遮罩。

1. 以所需大小将图像绘制到画布上
2. 创建一条路径 ，标记要“切出”形状的边缘。 3.将context.fillColor设置为没有alpha透明性的纯色（如果尚未这样做）
3. 设置context.globalCompositeOperation = 'destination-in'
4. 使用context.fillPath以目标输入模式绘制路径。 这将擦除路径外的所有内容，并将所有内容保留在路径内。
5. 设置context.globalCompositeOperation ='source-over'`以恢复正常的绘制行为。