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'); }); 2 Answers
Answers 1
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?
Answers 2
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); } } 
0 comments:
Post a Comment