2017-08-10 51 views
9

我正在向数据库添加日期和图像。我想将日期添加为上传的图像的页脚。在c上传时在图像上添加日期#

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

的脚本上传

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

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

'date as footer'是什么意思? – mplungjan

+0

在一个帖子中发现了这个。 https://stackoverflow.com/questions/1224653/place-watermark-image-on-other-images-c-asp-net是否有帮助? –

+0

在服务器端设置任何文件元数据会更有意义 - 特别是日期。 –

回答

10

我认为你需要操作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" />

请分享它是否适合你?

+0

我不知道为什么我的答案得到1票反对,但我认为它是正确的... –

+0

没关系,你给了你的答案,它是否正确或不是针对要求质疑的人决定的。 –

+0

@LuizPaulo在阅读问题时请注意。尽管你的解决方案(可能)完全有效,但它不是OP要求的 - 即他要求提供基于C#的解决方案,但是您提供了基于JavaScript的解决方案。这很可能是投票反对的原因。 –

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