Add date on image while uploading in c#

Question

I am adding date and image to the database. I want to add the date as the footer to the uploaded image.

HTML for image 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 for datepicker

 <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>

Script for Upload

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

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

found this in a thread. https://stackoverflow.com/questions/1224653/place-watermark-image-on-other-images-c-asp-net does this help? — Md. Tazbir Ur Rahman Bhuiyan, Aug 10 '17 at 11:13
It would make more sense to set any file metadata on the server side - especially the date. — Rory McCrossan, Aug 10 '17 at 11:18
hai mplungjan, he mean when i am uploaded image already edited and prited date of bottom of that image. which not outside the image he want inside the image — Abdulla Sirajudeen, Aug 11 '17 at 05:34
The answer Luiz Paulo posted is correct in the sense that it adds the text to the image. However it sounds like you are not actually saving that new image to the database, but the uploaded image instead — Ibn Masood, Aug 22 '17 at 18:17
I think you mean something like [this](https://stackoverflow.com/questions/1977932/c-sharp-how-can-i-watermark-a-jpeg-image) — Munzer, Aug 24 '17 at 05:53

score 9 · Accepted Answer · edited Aug 24 '17 at 08:23

I think you need to manipulate the image in the DOM before the post completes, using ajax to accomplish it

Having this in mind, all you need is to use a canvas to render the text from the datepicker inside the image.

As shown in the code -

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" />

Please share if it works for you?

I don't know why my answer get 1 down vote, but i think it is correct... — Luiz Paulo, Aug 21 '17 at 17:55
It doesn't matter, you gave your answer, whether it's correct or not is for the one who asked to question to decide. — Barr J, Aug 24 '17 at 05:34
@LuizPaulo Pay attention while reading the question. Although you solution (might be) perfectly valid it is not what the OP asks for - i.e. he asks for a C# based solution but you're providing a JavaScript based one. Most likely this is the reason for the down vote. — Bozhidar Stoyneff, Aug 24 '17 at 05:48

score 2 · Answer 2 · answered Aug 24 '17 at 05:43

You gonna need a reference to System.Drawing and play a little bit with graphics. I just authored a solution for you so it isn't bulletproof. You might wanna play around to change the colors, font, etc. as well as add exception handling.

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);
    }
}

Add date on image while uploading in c#

2 Answers2