Bind img to a model property in ASP.NET Core MVC

Question

I am generating dynamic image out of text on the form client side and want to attach that img to my model in mvc. How can I send that img to my action controller back attached to a model.

public class ReviewModel
{
    public string Image { get; set; }
}

<div class="col-md-12">
    <!-- Input HTML text is inside the DIV -->
    <div id="talltweets" class="mySign">
    The <b>quick brown fox</b> jumped over the <i>lazy dog</i>.
    </div>

    <!-- The PNG image will be added here -->
    <div style="background:yellow;padding:10px">
        <img id="textScreenshot" src="">
    </div>
</div>


<!-- Include the HTMl2Canvas library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<script>
    html2canvas(document.getElementById("talltweets"), {
        onrendered: function (canvas) {
            var screenshot = canvas.toDataURL("image/png");
            document.getElementById("textScreenshot").setAttribute("src", screenshot);
        }
    });
</script>

Answer 1

You can send your image as file instead of as text. Just some js code to do. Used example from here .

Add form with submit event on it.

document.getElementById("mainForm").addEventListener("submit", function (event) {
    event.preventDefault();

    var XHR = new XMLHttpRequest();
    var FD = new FormData();
    var ImageURL = document.getElementById("textScreenshot").getAttribute("src");
    var block = ImageURL.split(";");
    var contentType = block[0].split(":")[1];
    var realData = block[1].split(",")[1];
    var blob = b64toBlob(realData, contentType);
    FD.append('image', blob);
    XHR.open('POST', '/api/values/imageExample');
    XHR.send(FD);
});

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

Post your form to server side and do with recieved files whatever you want. This is .NetCore API controller exampe, which is saving requests files to filesystem.

[Route("api/[controller]")]
public class ValuesController : Controller
{
    [Route("imageExample")]
    public IActionResult ImageExample()
    {
        if (Request.Form != null && Request.Form.Files.Any())
        {
            foreach (var formFile in Request.Form.Files)
            {
                var filePath = Path.Combine("c:\\temp\\", formFile.FileName);
                using (var fileStream = new FileStream(filePath, FileMode.Create))
                {
                    formFile.CopyTo(fileStream); //saving file to file system
                }
            }
        }

        return Redirect("/somewhere-else");
    }
}