[英]Bind img to a model property in ASP.NET Core MVC
I am generating dynamic image out of text on the form client side and want to attach that img to my model in mvc. 我正在窗体客户端上用文本生成动态图像,并希望将该img附加到我在mvc中的模型。 How can I send that img to my action controller back attached to a model.
我该如何将该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>
You can send your image as file instead of as text. 您可以将图像作为文件而不是文本发送。 Just some js code to do.
只需执行一些js代码即可。 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.
这是.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");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.