Saya menambahkan tanggal dan gambar ke database. Saya ingin menambahkan tanggal sebagai footer ke gambar yang diunggah.

HTML untuk gambar 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 untuk 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>

Skrip untuk Unggah

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

$("#DocImg").click(function () {
    $("#fileUpload").trigger('click');
});
6
Alsamil Mehboob 10 Agustus 2017, 14:06

2 jawaban

Jawaban Terbaik

Saya pikir Anda perlu memanipulasi gambar di DOM sebelum posting selesai, menggunakan ajax untuk menyelesaikannya

Dengan mengingat hal ini, yang Anda butuhkan hanyalah menggunakan kanvas untuk merender teks dari datepicker di dalam gambar.

Seperti yang ditunjukkan dalam kode -

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

Silakan bagikan jika itu berhasil untuk Anda?

9
nitinr708 24 Agustus 2017, 08:23

Anda akan memerlukan referensi ke System.Drawing dan bermain sedikit dengan grafik. Saya baru saja menulis solusi untuk Anda sehingga tidak antipeluru. Anda mungkin ingin bermain-main untuk mengubah warna, font, dll. Serta menambahkan penanganan pengecualian.

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);
    }
}
2
Bozhidar Stoyneff 24 Agustus 2017, 05:43