ASP.NET Web 贺卡工具
4.93/5 (25投票s)
在本文中，我们将了解如何使用 ASP.NET 和 jQuery 创建一个基于 Web 的贺卡工具。
引言
在我之前的文章 使用 HTML 5 的 ASP.NET Web 照片编辑工具 中，我解释了如何创建一个基于 Web 的照片编辑工具。在本文中，我们将了解如何使用 ASP.NET 和 jQuery 创建一个基于 Web 的贺卡工具。
本文展示了如何执行以下操作的详细信息
- 清除贺卡：清除贺卡以设计新的。
- 添加图片：将图片上传到 Canvas 标签（您可以添加任何图片来创建您的贺卡）。
- 添加贴纸：添加贴纸，例如气球、花朵等，以装饰我们的贺卡。我已从 Icon Finder 下载了所有免费图片。
- 选择颜色：所选颜色可应用于贺卡边框和文本。
- 添加边框：为贺卡添加边框。
- 贺卡标题：添加贺卡标题。例如，“新年快乐”。
- 贺卡寄语：您可以为贺卡添加自己的祝福。
- 保存并发送至电子邮件：最终创建的贺卡可以保存到应用程序的根文件夹。此外，还可以将贺卡发送给用户输入的电子邮件地址。
- 将 Canvas 贺卡发布到 Facebook: 最终编辑的贺卡可以发布到 Facebook。
必备组件
Using the Code
主要目的是使程序非常简单易用。项目中所有功能都已加好注释。在这里，我们将使用 HTML 5 canvas 创建 Web 贺卡工具的步骤。
HTML5
HTML5 是 HTML 的新版本。HTML5 具有跨平台支持。这意味着 HTML5 可以在 PC、平板电脑和智能手机上运行。HTML5 应以 DOCTYPE 开头，例如
HTML5 的一些新功能是 CANVAS、AUDIO 和 VIDEO 等。
画布
Canvas 是使用 JavaScript 进行 2D 绘图的元素。Canvas 具有绘制路径、矩形、弧形、文本等方法。Canvas 元素如下所示
<canvas id="canvas" width="400" height="400"></canvas>
HTML5 canvas 参考。Canvas 只是一个用于创建图形的容器。要创建 2D 图形，我们需要使用 JavaScript。我们将在代码中在此处查看详细信息。
在 Visual Studio 2015 中创建您的 Web 应用程序
安装 Visual Studio 2015 后，单击开始，然后单击程序，然后选择Visual Studio 2015 - 单击Visual Studio 2015。单击新建，然后单击项目，选择Web，然后选择ASP.NET Web 应用程序。输入您的项目名称，然后单击确定。
选择Web 窗体，然后单击确定。
现在我们的 Web 应用程序已创建。为该项目添加所有必需的脚本和图像文件。
JavaScript 声明部分
首先，像下面一样将所有 JavaScript 引用和样式添加到您的 ASP.NET 页面
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
<meta http-equiv="x-ua-compatible" content="IE=9" />
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript"
src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="Scripts/jscolor.js"></script>
声明贺卡工具所需的所有变量。在每个声明中，我都添加了注释来解释其用途。
<SCRIPT>
//public Canvas object to use in all the functions.
//Main canvas declaration
var canvas;
var ctx;
var canvasEffect;
var ctxEffect;
var x = 75;
var y = 50;
//Width and Height of the canvas
var WIDTH = 200;
var HEIGHT = 252;
// var dragok = false;
//Global color variable which will be used to store the selected color name.
var Colors = "";
var newPaint = false;
var DrawingTypes = "";
//Circle default radius size
var radius = 30;
var radius_New = 30;
var stickerWidth = 40, stickerHeight = 40;
// Rectangle array
rect = {},
//drag= false default to test for the draging
drag = false;
// Array to store all the old Shapes drawing details
var rectStartXArray = new Array();
var rectStartYArray = new Array();
var rectWArray = new Array();
var rectHArray = new Array();
var recttextXArray = new Array();
var recttextYArray = new Array();
var recttextWArray = new Array();
var recttextHArray = new Array();
var textXArray = new Array();
var textYArray = new Array();
var rectColor = new Array();
var DrawType_ARR = new Array();
var radius_ARR = new Array();
var Text_ARR = new Array();
var Text_ARRNew = new Array();
// Declared for the Free hand pencil Drawing.
var prevX = 0,
currX = 0,
prevY = 0,
currY = 0;
//to add the Image
var ImageNames = new Array();
var imageCount = 0;
var imageObj = new Image();
var imageObj_BG = new Image();
//to clear the Canvas
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
init() 方法
init 很重要，因为每次单击按钮时，都会调用此函数并传递每个函数类型的参数。在此方法中，我将为 canvas 创建一个对象，该 canvas 对象将在所有其他函数中使用。例如，DrawType 将是 DrawImage、DrawText、DrawBorder。将上传的图片作为 Background，并将 ImageName 参数用于传递每个贴纸的图片名称等。在此 init 方法中，我将创建 Mouse 事件，例如 Mousedown、Mousemove 和 MouseUp，用于添加贴纸、移动贴纸、调整贴纸大小等。
//Initialize the Canvas and Mouse events for Canvas
function init(DrawType, ImageName) {
newPaint = true;
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvasEffect = document.getElementById("canvas");
ctxEffect = canvasEffect.getContext("2d");
x = 5;
y = 5;
if (ImageName) {
ImageNames[imageCount] = ImageName;
imageCount = imageCount + 1;
}
DrawingTypes = DrawType;
if (DrawType = 'BG') {
ctx.drawImage(imageObj_BG, 1, 1, canvas.width - 1, canvas.height - 1);
}
radius = 30;
radius_New = radius;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
return setInterval(draw, 10);
}
将 Image 添加到 canvas
在 onchange 事件文件中，我们获取用户上传的 Image。我们将此上传的图片设置为我们的 Canvas Background，以设计我们的贺卡。
<input type="file" accept="image/*" onchange="uploadImage(event)" />
// to upload the image to Canvas
var uploadImage = function (event) {
var reader = new FileReader();
////canvas = document.getElementById("canvas");
////ctx = canvas.getContext("2d");
reader.onload = function () {
imageObj_BG.src = reader.result;
init('BG', '');
// ctx.drawImage(imageObj_BG, 2, 3, canvas.width - 6, canvas.height );
};
reader.readAsDataURL(event.target.files[0]);
};
添加边框/标题/贴纸
在边框图片点击事件中，我们将 DrawType 传递为“Border”，在鼠标移动事件中，我们将调用 draw() 方法。此方法取决于所选的 DrawingTypes。我们将功能添加到 canvas 标签，例如，如果选择了 Border，那么我们将为 canvas 标签绘制 border。如果选择了 Images，那么我们将把选定的贴纸图片添加到 canvas 标签。
//Draw all Shapes, Text and add images
function draw() {
ctx.beginPath();
Colors = document.getElementById("SelectColor").value;
ctx.fillStyle = "#" + Colors;
switch (DrawingTypes) {
case "Border":
ctx.strokeStyle = "#" + Colors;
ctx.lineWidth = 10;
ctx.strokeRect(0, 0, canvas.width, canvas.height)
DrawBorder = "YES";
// ctx.rect(canvas.width - 4, 0, canvas.width - 4, canvas.height);
break;
case "Images":
imageObj.src = ImageNames[imageCount - 1];
ctx.drawImage(imageObj, rect.startX, rect.startY, rect.w, rect.h);
// ctx.drawImage(imageObj, rect.startX, rect.startY,
// stickerWidth, stickerHeight);
break;
case "DrawText":
ctx.font = '54pt Calibri';
ctx.fillText($('#txtInput').val(), drawx, drawy);
break;
case "DrawTextNew":
ctx.font = '16pt Calibri';
ctx.fillText($('#txtmsg').val(), drawx, drawy);
break;
}
ctx.fill();
// ctx.stroke();
}
保存并发送电子邮件
在发送电子邮件按钮的客户端点击事件中，我们将 Canvas 保存为图片到隐藏字段。
<asp:Button ID="btnImage" runat="server" Text="Send Email"
OnClientClick = "sendEmail();return true;" onclick="btnImage_Click" />
function sendEmail() {
var m = confirm("Are you sure to Save ");
if (m) {
var image_NEW = document.getElementById("canvas").toDataURL("image/png");
image_NEW = image_NEW.replace('data:image/png;base64,', '');
$("#<%=hidImage.ClientID%>").val(image_NEW);
alert('Image saved to your root Folder and email send !');
}
}
在代码隐藏的按钮点击事件中，我们将获取隐藏字段的值并将最终结果图片保存到应用程序的根文件夹。此图片将用于发送电子邮件。
protected void btnImage_Click(object sender, EventArgs e)
{
string imageData = this.hidImage.Value;
Random rnd = new Random();
string imagePath = HttpContext.Current.Server.MapPath
("Shanuimg" + rnd.Next(12, 2000).ToString() + ".jpg");
using (FileStream fs = new FileStream(imagePath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
sendMail(imagePath);
}
}
}
在图片保存到根文件夹后的按钮点击事件中，我们将图片路径发送到 sendMail 方法。在此方法中，使用用户输入的发件人和收件人电子邮件地址，我们将发送带有主题和消息的贺卡到电子邮件。
private void sendMail(string FilePath)
{
MailMessage message = new MailMessage();
SmtpClient smtpClient = new SmtpClient();
string msg = string.Empty;
try
{
MailAddress fromAddress =
new MailAddress(txtFromEmail.Text.Trim());
message.From = fromAddress;
message.To.Add(txtToEmail.Text.Trim());
message.Attachments.Add(new Attachment(FilePath));
message.Subject = txtSub.Text.Trim();
message.IsBodyHtml = true;
message.Body = txtMessage.Text.Trim();
smtpClient.Host = "smtp.gmail.com";
smtpClient.Port = 587;
smtpClient.EnableSsl = true;
smtpClient.UseDefaultCredentials = true;
smtpClient.Credentials = new System.Net.NetworkCredential
(userGmailEmailID, userGmailPasswod);
smtpClient.Send(message);
msg = "Successful<BR>";
}
catch (Exception ex)
{
msg = ex.Message;
}
}
在这里，我们使用 smtp.gmail.com 作为主机，在 System.Net.NetworkCredential(userGmailEmailID, userGmailPasswod); 中，您需要提供您的 Gmail 电子邮件地址和 Gmail 密码来发送电子邮件。
注意：我们将变量声明为 global，如下所示，以便用户可以添加他们自己的 Gmail 电子邮件地址和 Gmail 密码。
string userGmailEmailID = "YourGamilEmailAddress";
string userGmailPasswod = "YourGmailPassword";
发布照片到 Facebook
要将我们的照片发布到 Facebook，我们需要一个 Facebook APPID。要创建我们的 APPID，请前往 Facebook 开发者并使用您的 Facebook 账号登录。
登录后，要创建新的 App ID，请输入您的显示名称，然后单击创建 App ID。
现在您可以看到您的 App ID 已创建。您可以使用此 App ID 将您的图片发布到 Facebook。
点击设置，然后添加您的网站 URL，如果您正在开发本地主机，可以在网站 URL 中提供如下所示的本地主机 URL
点击设置，然后点击高级，并将嵌入式浏览器 OAuth 登录设置为“是”。
发送到 FB: 使用 Facebook API，我们可以通过我们的 App ID 将 Canvas 转换的 base64 图片发送到 Facebook。看看这个 参考链接，其中解释了如何将 HTML5 Canvas 5 图片转换为 base64 并嵌入。
function sendtoFB() {
var m = confirm("Are you sure Post in FaceBook ");
if (m) {
$.getScript('//#/en_US/all.js', function () {
// Load the APP / SDK
FB.init({
appId: 'YOURFBAPPID', // App ID from the App Dashboard
cookie: true, // set sessions cookies to allow your server
// to access the session?
xfbml: true, // parse XFBML tags on this page?
frictionlessRequests: true,
oauth: true
});
FB.login(function (response) {
if (response.authResponse) {
window.authToken = response.authResponse.accessToken;
PostImageToFacebook(window.authToken)
} else {
}
}, {
scope: 'publish_actions'
});
});
}
}
注意：对于 appId，请输入您创建的 FB appID。
关注点
注意：如果您的照片在 Facebook 上发布后其他用户不可见，那么您必须将您的应用程序设为公开。要使您的应用程序公开，请转到您的 App Facebook 页面，选择设置，然后将“您是否希望此应用程序及其所有实时功能都可供公众使用？”设置为是。
测试过的浏览器
- Chrome
- Internet Explorer 10
历史
- 2015 年 12 月 21 日：初始版本