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

Question

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

这是如何存档的？我添加了一个图像作为例子。

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

Answer 1

您可以使用“ 画布 ”： 在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="http://i.stack.imgur.com/XoRrD.jpg" alt="" />
    <canvas id="mycanvas" width="1" height="1"></canvas>
</div>

请注意，仅现代浏览器支持画布....

要将所有图像转换为单个图像，您需要两个图像（圆圈和图片） 你只能在服务器端（php）：

搜索“ php水印”的stackoverflow

youtube上的视频指南：php watermark

Answer 2

正如PHP manual中所述：您可以添加水印。

  

注意：您需要启用   扩展 = <强> php_gd2

PHP     

// Set the margins for the stamp and get the height/width of the stamp image
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);

// Copy the stamp image onto our photo using the margin offsets and the photo 
// width to calculate positioning of the stamp. 
imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));

// Output and free memory
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);

HTML

<div class="image">
    <img src="http://placehold.it/350x350" />
    <div class="watermark"></div>
</div>

<a id="getPos" href="javascript: void(0);">Get Position</a>

的Javascript

$(function () {
    $(".watermark").each(function () {
        $(this).draggable({
            containment: $(this).parent(".image")
        });
    });

    $("#getPos").click(function(){
        var imgPos = $(".image img").offset();
        var wmPos_tmp = $(".watermark").offset();

        var watermarkPosition = {
            top: wmPos_tmp.top - imgPos.top,
            left: wmPos_tmp.left - imgPos.left
        }
        console.log(watermarkPosition);
    });
});

CSS

.image {
    position: relative;
    width: 350px;
}
.watermark {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
    top: 100px;
    left: 140px;
}