javascript - 为上传的图片添加几何圆圈

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

我想将图像/图片上传到网站，并在预览中我想在图像顶部添加或绘制一个红色圆圈并将其另存为新照片。

如何存档？我添加了一张图像作为示例。

任何已知的脚本或类似的脚本可能有用吗？

Answer 1

您可以使用“ Canvas ”:在 HTML 中动态应用圆。 (它不会修改图像)

看这里的代码片段:(黄色圆圈就是那个)

1. 使用 x,y 将圆定位在 img 上...
2. 使用半径设置圆的大小
3. 给颜色上色...描画厚度...

function drowCircle(canvas, x, y, radius, color, stroke){
    canvas.width = (radius+stroke)*2;
    canvas.height = (radius+stroke)*2;
    canvas.style.top = y+"px";
    canvas.style.left = x+"px";
    var context = canvas.getContext("2d");
    context.beginPath();
    context.arc((canvas.width/2),(canvas.height/2),radius,0,2*Math.PI,false);
    context.lineWidth=stroke;
    context.strokeStyle=color;
    context.stroke();
}

window.addEventListener("load",function(){
    drowCircle(document.getElementById("mycanvas"), 100, 200, 25, "yellow", 5);
},false)

#mycanvas{
    position:absolute; top:0px; left:0px;
}

<div class="imgContainer" style="position:relative;">
    <img src="/image/XoRrD.jpg" alt="" />
    <canvas id="mycanvas" width="1" height="1"></canvas>
</div>

请注意，canvas 仅受现代浏览器支持......

要将所有内容合并为单个图像，您需要两个图像(圆圈和图片)并且您只能在服务器端(php)执行此操作:

在 stackoverflow 中搜索“php 水印”

YouTube 上的视频指南:php watermark