FAI

部分涉及MVC   JS   Html5   ADO.NET   LINQ   VS自带report

求： 上传图片保存如数据库并打印为PDF  (图片数量几十)

思路：同时选择多张图片批量上传。保存到指定文件夹，通过js加载到canvas 画布中。转换canvas为图片，传递后台，转换二进制。保存入数据库。打印为pdf格式文件进行下载。

难点：html5 中canvas 数据传递，二进制保存数据库，Pdf打印图片。

理解点：canvas 传递的数据类型是data url

data url 这种数据方式主要是<img>图片的另外一种形式。

开始：图片转换二进制

项目：构建数据库，保存图片的类型image 类型。存放图片二进制。

两种方式：一种通过数据流产生二进制

//获取文件名

                string sFilename = System.IO.Path.GetFileName(myPhoto.FileName).ToLower();

                //获取upImage文件的扩展名

                string extendName = System.IO.Path.GetExtension(sFilename);

                //判断是否为图片格式

                if (extendName != ".jpg" && extendName != ".jpeg" && extendName != ".gif" && extendName != ".bmp" && extendName != ".png")

                {

                    pError = 2;

                    ViewBag.Message_viewbag = "图片类型不支持！";

                    return View();

                }

 

                byte[] myData = new Byte[sFileLength];

                myPhoto.InputStream.Read(myData, 0, sFileLength);

第二种:使用编码转换

data url 这种数据是一种特殊的形式，必须要转换才能得到二进制

    byte[] bytes = new byte[strNo.Length];

bytes = Convert.FromBase64String(strNo);

 

 

 

canvas画布转换图片

先要用canvas绘制模板

例如：//选择画布

        var canvas = document.getElementById("MyCanvas");

        var context = canvas.getContext("2d");

        //绘制第一条直线

        context.moveTo(0, 300);

        context.lineTo(800, 300);

        context.stroke();

        //绘制第二条直线

        context.moveTo(400, 0);

        context.lineTo(400, 300);

        context.stroke();

通过JS转换。各种图片类型都可以

function PostData() {

        var canvasend = document.getElementById("MyCavas");

        var imageCation = new Image();

        imageCation.src = canvasend.toDataURL("image/png");

        var b64 = imageCation.src.substring(22);

       //此部分为剪切掉图片标识，不同类型剪切位不同。

        //图片保存

        $.post("/Home/save", { strNo: b64, strtype: "Cation" }, function () {

            $('#lblwanring').text("Save OK!");

        });

    }

已经此部分通过post方法跳转action

 

 

保存到数据库

采用ADO.net 数据库映射上下文。产生model

保存入数据库采用EF。

查询需要打印的数据采用linq

例如：

var li = from p in db.Images where p.PdfNo.Equals(strDclct) select p;

 

 

VS自带Report使用。

必须要引用dll：Microsoft.ReportViewer.WebForms.dll

LocalReport report = new LocalReport();

            report.ReportPath = Server.MapPath("~/Report/RtView.rdlc");

            ReportDataSource reportDataSource = new ReportDataSource("DataSet1", li.ToList());

            report.DataSources.Add(reportDataSource);

            string filename = "BuImage" + ".PDF";

            string reportType = "PDF";

            string mimeType;

            string encoding;

            string fileNameExtension;

            string DeviceInfo = "<DeviceInfo>" + "<OutputFormat>PDF</OutputFormat>" + "  <PageWidth>10in</PageWidth>" + "  <PageHeight>12in</PageHeight>" + "  <MarginTop>0.5in</MarginTop>" + "  <MarginLeft>1in</MarginLeft>" + "  <MarginRight>1in</MarginRight>" + "  <MarginBottom>0.5in</MarginBottom>" + "</DeviceInfo>";

            Warning[] warnings;

            string[] streams;

            byte[] renderedBytes;

            renderedBytes = report.Render(reportType, DeviceInfo, out mimeType, out encoding, out fileNameExtension, out streams, out warnings);

 

            FileStream fs = new FileStream(HttpContext.Server.MapPath("~/Upload/BuImage.PDF"), FileMode.Create);

            fs.Write(renderedBytes, 0, renderedBytes.Length);

            fs.Close();

 

注意report模板中栏位一定要为image/png格式。

 

图片批量上传：

@* 上传要保存的图片 *@

 @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

 {

@* 选择图片保存类型 *@

     <select id="slType" name="strType">

         <option>Cation</option>

         <option>Pation</option>

         <option>Sation</option>

     </select>

 //上传图片多选

<input name="fileToUpload" id="uploadFile" type="file" multiple="multiple"  />

<input id="suUpload" type="submit" value="上传" name="Upload" />

<label for="name" style="font-size:15px;color:red" id="lblwanring">@ViewBag.Message_viewbag</label>

}

 

提交表单的方式

multiple="multiple"  此值允许多选图片，不加则单选。

 

 

 

Js 如果切换canvas的模板

如果重新创建canvas 。

对于Canvas的模板进行替换。替换的重点是div先要清除。

 

Js获取动态加载对象语句：

  var canvasend = $("#lineArea").get(0);  //获取对象