將img綁定到ASP.NET Core MVC中的模型屬性

Question

我正在窗體客戶端上用文本生成動態圖像，並希望將該img附加到我在mvc中的模型。 我該如何將該img發送回附加到​​模型的動作控制器。

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

您可以將圖像作為文件而不是文本發送。 只需執行一些js代碼即可。 從這里使用示例。

添加帶有提交事件的表單。

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

將表格發布到服務器端，並根據需要處理接收的文件。 這是.NetCore API控制器示例，它將請求文件保存到文件系統。

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