アップロード中に画像に日付を追加する＃

Question

私はデータベースに日付と画像を追加しています。アップロードした画像にフッタとして日付を追加したいと思います。

画像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のための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> 

ため、私はあなたが前にDOMに画像を操作する必要があると思うアップロード

ためのスクリプト

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

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

Answer 1

投稿 を完成させるためにajaxを使用して完成します

これを念頭に置いて、キャンバスを使用して画像内の日付ピッカーからテキストをレンダリングするだけでOKです。

コードに示すように -

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

それはあなたのために動作するかどうかを共有して下さい！

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