在C#上传图片时添加日期

Question

我正在将日期和图像添加到数据库中。我希望将日期作为上传的图像的页脚添加。

图像上传的HTML代码： upload

<div class="form-group">
    @Html.Label("Photo", htmlAttributes: new { @class = "control-label" })
    <div class="col-md-10">
        <img id="DocImg" src="~/Upload/DoctorImage/doc-default.png" style="cursor: pointer;"  accesskeyclass="edtImg" width="100" height="100" />
        <input type="file" id="fileUpload" name="Photo" accept="image/*" />
    </div>
</div>

日期选择器的HTML代码

 <div class="col-6">
    @Html.ValidationSummary(true, "", new { @class = "text-danger"})
    <div class="form-group">
        @Html.Label("Joining Date", htmlAttributes: new { @class = "control-label col-md-2", @required = "required" })
        <div class="col-md-10">
            @(Html.Kendo().DatePicker()
                            .Name("JoiningDate")
                            .Value("")
                            .HtmlAttributes(new { style = "width: 100%", required = "true" })
            )
            @Html.ValidationMessageFor(model => model.JoiningDate, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

上传脚本

$(document).ready(function () {
    $("#fileUpload").hide();
});

$("#DocImg").click(function () {
    $("#fileUpload").trigger('click');
});

- Alsamil Mehboob

---

“date as the footer” 是什么意思？ - mplungjan

在一个帖子中找到了这个。https://dev59.com/kHM_5IYBdhLWcg3wzmcw 这有帮助吗？ - Md. Tazbir Ur Rahman Bhuiyan

最好在服务器端设置任何文件元数据，特别是日期。 - Rory McCrossan

嗨mplungjan，他的意思是当我上传已经编辑并在图像底部打印日期时。这不是在图像外面，他想要在图像内部。 - Abdulla Sirajudeen

Luiz Paulo 发布的答案是正确的，因为它将文本添加到图像中。但是，您似乎并没有将新图像保存到数据库中，而是保存了上传的图像。 - Ibn Masood

我认为您的意思是类似于这里的内容。 - Munzer

Answer 1

我认为你需要在提交之前使用ajax操作DOM中的图像来完成操作。

考虑到这一点，您只需要使用画布将日期选择器中的文本呈现在图像中即可。

代码如下所示-

var canvasEl = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvasEl.width = $('img').width();
canvasEl.crossOrigin = "Anonymous";
canvasEl.height = $('img').height();
ctx.drawImage($('img').get(0), 0, 0);
ctx.font = "36pt Verdana";

$(document).on('input','#inp',function(){
    //redraw image
    ctx.clearRect(0,0,canvasEl.width,canvasEl.height);
    ctx.drawImage($('img').get(0), 0, 0);
    
    //refill text
    ctx.fillStyle = "red";
    ctx.fillText($(this).val(),40,80); //positioning text wherever you want
});

$('button').click(function(){
    console.log(ctx.getImageData(50, 50, 100, 100));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <img style="display:none" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTsEbEB4kEMHt3WJ13HpZE16hJ3iKrE8ugnErvyln7oNPDma48U" crossorigin="anonymous"/>
 <input type="text" id="inp"/>
  <button type="submit">Save</button>
</form>

<canvas id="canvas" />

请分享一下是否适用于您？

- Luiz Paulo

---

我不知道为什么我的答案会得到一个踩，但我认为它是正确的... - Luiz Paulo

无论如何，你已经给出了你的答案，是否正确由提问者决定。 - Barr J

@LuizPaulo 在阅读问题时请注意。虽然您的解决方案（可能）完全有效，但这不是 OP 要求的 - 即他要求基于 C# 的解决方案，而您提供的是基于 JavaScript 的解决方案。很可能这就是投票反对的原因。 - Bozhidar Stoyneff

Answer 2

您需要引用System.Drawing并进行一些图形操作。我为您编写了一个解决方案，但它并不是万无一失的。您可能想要尝试更改颜色、字体等内容，以及添加异常处理。

public void AddWatermark(string inputhPath, string outputPath)
{
    var wm = DateTime.Now.ToShortDateString();

    using (var bmp = Bitmap.FromFile(inputhPath))
    using (var g = Graphics.FromImage(bmp))
    using (var transparentBrush = new SolidBrush(Color.FromArgb(164, 0, 0, 0)))
    using (var font = new Font("Calibri", 20, FontStyle.Bold, GraphicsUnit.Pixel))
    {
        var format = new StringFormat(StringFormatFlags.NoWrap);
        var dim = g.MeasureString(wm, font);
        var loc = new Point(bmp.Width - (int)dim.Width - 20, bmp.Height - (int)dim.Height * 2);

        g.DrawString(wm, font, transparentBrush, loc);

        bmp.Save(outputPath);
    }
}

- Bozhidar Stoyneff