我正在尝试创建幻灯片演示，其中将图像托管在外部JSON数组中，然后加载到html页面上，然后插入HTML5画布上。
到目前为止，我已经能够加载所有图像，但是无法从加载的Json图像中向画布添加一个图像。
HTML：
#region Quotation Insert
[HttpPost]
public ActionResult mQuotationInsert(int Qt_ID, string EnteryDate, string Purpose, Quotation[] Quot, string AddNew)
{
string result = "Error! Order Is Not Complete!";
try
{
objQuotation.QuotationInsert(Qt_ID, EnteryDate, Purpose, Quot, AddNew);
ModelState.Clear();
result = "Quotation Inserted Successfully!";
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (Exception)
{
throw;
}
}
public int QuotationInsert(int Qt_ID, string EnteryDate, string Purpose, Quotation[] Quot, string AddNew)
{
try
{
con.Open();
tr = con.BeginTransaction();
if (AddNew == "New")
{
cmd = new SqlCommand("Select Right('00' + Cast(ISNULL(MAX(Qt_ID),0)+1 as varchar(2)) + '', 2) from QuotationMain", con);
cmd.Transaction = tr;
Qt_ID = Convert.ToInt32(cmd.ExecuteScalar().ToString());
cmd = new SqlCommand("Sp_QuotationMainInsert", con);
}
else
cmd = new SqlCommand("Sp_QuotationMainUpdate", con);
cmd.Parameters.AddWithValue("@Qt_ID", Qt_ID);
cmd.Parameters.AddWithValue("@Comp_ID", 1);
if (EnteryDate != null)
cmd.Parameters.AddWithValue("@EnteryDate", EnteryDate);
else
cmd.Parameters.AddWithValue("@EnteryDate", string.Empty);
cmd.Parameters.AddWithValue("@Username", HttpContext.Current.Session["AgentName"]);
cmd.Parameters.AddWithValue("@Purpose", Purpose);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Transaction = tr;
cmd.ExecuteNonQuery();
if(Quot !=null)
{
for (int i = 0; i < Quot.Length; i++)
{
try
{
String dirPath = "~/AppFiles/Images/";
byte[] imgByteArray = Convert.FromBase64String(Quot[i].imageFile);
File.WriteAllBytes(dirPath, imgByteArray);
//string fileName = Path.GetFileNameWithoutExtension(Quot[i].imageFile.FileName);
//string extension = Path.GetExtension(Quot[i].imageFile.FileName);
//fileName = fileName + DateTime.Now.ToString("dd/MM/yyyy") + extension;
//Quot[i].imagePath = "~/AppFiles/Images/" + fileName;
//fileName = Path.Combine(HttpContext.Current.Server.MapPath("~/AppFiles/Images/"), fileName);
//Quot[i].imageFile.SaveAs(fileName);
if (AddNew == "New")
{
cmd = new SqlCommand("Select ISNULL(MAX(Qt_Dt_ID), 0) + 1 from QuotationDetail", con);
cmd.Transaction = tr;
mQt_Det_ID = Convert.ToInt32(cmd.ExecuteScalar());
cmd = new SqlCommand("Sp_QuotationDetailInsert", con);
cmd.Parameters.AddWithValue("@Qt_Dt_ID", mQt_Det_ID);
}
else if (AddNew == "Edit")
{
cmd = new SqlCommand("Sp_QuotationDetailUpdate", con);
cmd.Parameters.AddWithValue("@Qt_Dt_ID", Quot[i].Qt_Dt_ID);
}
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Qt_Dt_ID", mQt_Det_ID);
cmd.Parameters.AddWithValue("@Qt_ID", Qt_ID);
cmd.Parameters.AddWithValue("@SrNo", Quot[i].Srno);
cmd.Parameters.AddWithValue("@PartyName", Quot[i].PartyName);
cmd.Parameters.AddWithValue("@IsMature", Quot[i].IsMature);
if (Quot[i].imagePath != null)
//cmd.Parameters.AddWithValue("@Image", fileName);
cmd.Transaction = tr;
cmd.ExecuteNonQuery();
}
catch (Exception)
{
throw;
}
}
}
tr.Commit();
return i;
}
catch (SqlException sqlex)
{
tr.Rollback();
throw sqlex; // read all sql error
}
catch (Exception ex)
{
tr.Rollback();
throw ex; // General execption
}
finally
{
con.Close();
}
}
JavaScript尝试：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css"
href="http://localhost/slideshow.css">
<meta name="viewport" content="width=device-width">
<title> JSON SlideShow </title>
</head>
<body>
<header>
<h1> JSON </h1>
<button id="btn"> GET </button>
<div id=slideshow"></div>
<p>Canvas:</p>
<canvas id="Canvas777" width="240" height="297" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="http://localhost/slideshow.js"></script>
</header>
</body>
</html>
我知道我做错了，但不知道如何解决。
答案 0 :(得分：0)
对于演示，我将您的数据用作变量。另外，我只使用2张图片。另外，我必须调用renderHTML（）函数。您需要使用getImages.onload调用此函数，希望它对您有用。
尽管我使用
let data = [
{
img:
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg",
msg: "There once was a kitten called Nina"
},
{
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyD300.jpg",
msg: "Who was funny, silly"
}
];
var slideContainer = document.getElementById("slideshow");
//var btn = document.getElementById("btn");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
/*
var getImages = new XMLHttpRequest();
getImages.open('GET', 'http://localhost/TMA1/part3/slideshow.json');
getImages.onload = function() {
var ourData = JSON.parse(getImages.responseText);
renderHTML(ourData);
};
getImages.send();*/
function renderHTML(data) {
data.map(f => {
loadImg(f.img).then(successurl => {
let htmlString = '<img width="150" src="' + successurl + '" />';
slideContainer.insertAdjacentHTML("beforeend", htmlString);
var img = new Image();
img.src = successurl;
ctx.drawImage(img, 10, 10);
}),
errorurl => {
console.log("Error loading " + errorurl);
};
});
}
function loadImg(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => {
resolve(url);
};
img.onerror = () => {
reject(url);
};
img.src = url;
});
}
renderHTML(data);<button id="btn"> GET </button>
<div id="slideshow"></div>
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>