使用 HTML5 进行 ASP.NET 网页照片编辑工具
4.81/5 (27投票s)
本文介绍如何使用 HTML5、jQuery 和 ASP.NET 创建一个简单的基于网页的照片编辑工具。
引言
在我之前的文章《使用 HTML 5 CANVAS 在 ASP.NET 中进行网页绘画工具》中，我介绍了如何使用 HTML5 和 jQuery 创建一个简单的网页绘画工具。本文介绍如何使用 HTML5、jQuery 和 ASP.NET 创建一个简单的基于网页的照片编辑工具。
本文展示了如何完成以下操作的详细步骤
- 从网络摄像头捕获图像（我使用了 Webcam JS，您可以从这个链接下载脚本文件）。
Webcam JS 是一个 JavaScript 库，用于从网络摄像头捕获图像，并将它们保存为 JPEG/PNG 或任何 data URI 格式。
我使用这个库从网络摄像头捕获图像，并在 HTML 5 canvas 中显示捕获的图像，以便进行照片编辑、添加笑脸、文本，并通过电子邮件发送最终编辑后的图像。 - 添加贴纸：向我们捕获的照片添加贴纸，例如笑脸、花朵等。
- 添加边框：为捕获的照片添加边框。
- 添加文本：向捕获的照片添加文本。
- 添加滤镜：为捕获的照片添加滤镜，例如增加对比度、将其变为黑白照片、反转照片颜色或恢复为原始捕获照片。
- 保存并发送至电子邮件：最终编辑后的照片可以保存到应用程序根文件夹，您可以将编辑后的照片发送到电子邮件地址。
- 发布 Canvas 照片到 Facebook：最终编辑后的照片可以发布到 Facebook。
必备组件
- Visual Studio 2013 或 Visual Studio 2010
在源代码 zip 文件中，您可以找到 Visual Studio 2010 和 Visual Studio 2013 的解决方案。您可以根据您的 Visual Studio 版本使用任何一个解决方案。 - 网络摄像头（用于捕获您的照片以进行编辑和发送电子邮件）。
Using the Code
主要目的是使程序非常简单易用。项目中的所有功能都已添加了详细的注释。我已将我的示例程序附加到本文中以供参考。在这里，我们将看到使用 HTML5 canvas 创建照片编辑工具的步骤。
HTML5
HTML5 是 HTML 的新版本。HTML5 具有跨平台支持。这意味着 HTML5 可以在 PC、平板电脑和智能手机上运行。HTML5 应该以 DOCTYPE 开始，例如
<!DOCTYPE html> <html> <body></body> </html>
步骤 1：添加引用
将整个 JavaScript 库添加到您的项目中以使用网络摄像头捕获。对于网络摄像头捕获，我们需要 webcam.js、webcam.min.js 和 webcam.swf。您可以从此处下载这些文件。
步骤 2 - 添加网络摄像头
在浏览器中添加以下代码以初始化网络摄像头并显示网络摄像头图像
<table >
<tr>
<td align="center">
<div id="my_camera"></div>
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
</script>
</td>
</tr>
<tr>
<td align="center">
<input type=button value="Capture Photo" onClick="takePhoto()">
</td>
</tr>
</table>
捕获图像
在“捕获”按钮的客户端单击事件中，调用 takePhoto() 方法。在此方法中，使用 webcam.js 的 snap 方法，我们从实时网络摄像头获取 Image。我将生成的图像存储在全局变量中，并调用 init 方法将此照片添加到 HTML5 Canvas 标签。
function takePhoto() {
Webcam.snap(function (data_uri) {
imageObj_BG.src = data_uri;
init('BG', '');
});
}
步骤 3 – 添加 HTML Canvas 标签
创建 Canvas 元素并声明全局变量，并在 JavaScript 中初始化 Canvas。在代码中，我使用了注释以便于理解声明。
HTML Canvas 部分
<SECTION style="border-style: solid; border-width: 2px; width: 600px;">
<CANVAS HEIGHT="452" WIDTH="600px" ID="canvas">
Your browser is not supporting HTML5 Canvas.
Upgrade Browser to view this program or check with Chrome or in Firefox.
</CANVAS>
</SECTION>
JavaScript 声明部分
首先，将所有 JavaScript 引用和样式添加到您的 ASP.NET 页面，如下所示
<meta http-equiv="x-ua-compatible" content="IE=9" />
<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="webcam.js"></script>
<link href="Content/myStyle.css" rel="stylesheet" type="text/css" />
声明所有需要用于照片编辑的变量。在每个声明中，我都添加了注释，解释其用途。
<SCRIPT>
// public Canvas object to use in all the functions.
// Main canvas declaration
var canvas;
var ctx;
// canvas declaration photo filter add
var canvasEffect;
var ctxEffect;
// Width and Height of the canvas
var WIDTH = 600;
var HEIGHT = 452;
// 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 defult 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 rectColor = new Array();
var DrawType_ARR = new Array();
var radius_ARR = new Array();
var Text_ARR = new Array();
//to add the Image, this will be used to add all the stickers like Smiley,
//Animels, Flowers, etc.
var ImageNames = new Array();
var imageCount = 0;
var imageObj = new Image();
var imageObj_BG = new Image();
var newImagename = '';
// For the Filters effects added to photo like Contrast, Black&White, etc.
var isEffectadded = 'NO';
var EffectType = 'black';
var DrawBorder = "No";
//Clear the Canvas
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
init() 方法
init 很重要，因为每次单击按钮时，都会调用此函数并为每个函数类型传递参数。在此方法中，我将创建一个 canvas 对象，并将此 canvas 对象用于所有其他函数。例如，这里 DrawType 将是 DrawImage、DrawText、DrawBorder、Place Photo as BG 和 Filter Effects，而 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);
}
if (DrawingTypes == 'Effects') {
isEffectadded = 'YES';
EffectType = ImageName;
Effects();
}
radius = 30;
radius_New = radius;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
return setInterval(draw, 10);
}
将捕获的照片添加到 Canvas
例如，要将捕获的照片添加到 canvas，我们调用 takePhoto 方法。
<input type=button value="Capture Photo" onClick="takePhoto()">
我们已经看到，在 takePhoto 中，我们将捕获的照片存储在一个全局图像变量中。
function takePhoto() {
// take your photo and add the photo as canvas Background Image
Webcam.snap(function (data_uri) {
imageObj_BG.src = data_uri;
init('BG', '');
});
}
在此方法中，我调用了 init('BG', '')，并在 init 方法中，我将检查 DrawType = 'BG'。如果为 true，那么我将像下面一样将捕获的图像绘制到 canvas 上
if (DrawType = 'BG') {
ctx.drawImage(imageObj_BG, 1, 1, canvas.width - 1, canvas.height - 1);
}
向捕获的照片添加边框/文本/贴纸
在“边框图片”单击事件中，我将 DrawType 传递为“Border”，并在鼠标移动事件中，我将调用 draw() 方法。此方法取决于所选的 DrawingTypes。我将向 canvas 标签添加功能，例如，如果选择了 Border，我将为 canvas 标签绘制边框。如果选择了 Images，我将把选定的贴纸图像添加到 canvas 标签。
<img src="images/rect.png" onClick="init('Border','')" />
<img src="images/Font.png" onClick="init('DrawText','')" />
<img src="images/smily8.png" width="36" height="36"
onClick="init('Images','images/smily8.png')"/>
<img src="images/smily9.png" width="36" height="36"
onClick="init('Images','images/smily9.png')"/>
<img src="images/smily10.png" width="36" height="36"
onClick="init('Images','images/smily10.png')"/>
//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 = '40pt Calibri';
ctx.fillText($('#txtInput').val(), drawx, drawy);
break;
}
ctx.fill();
// ctx.stroke();
}
向捕获的照片添加滤镜效果
为了向捕获的照片添加滤镜效果，我创建了一个 Effects 函数。此方法取决于用户单击的效果。我将把照片更改为黑白、对比度、反色或原始图像。
<input type=button value="Black&White" onClick="init('Effects', 'black')"/>
<input type=button value="Contrast" onClick="init('Effects', 'contrast')"/>
<input type=button value="Invert Color" onClick="init('Effects', 'invertColors')"/>
<input type=button value="OriginalImage" onClick="init('Effects', 'OriginalImage')"/>
//Add all Effects which we need to change for image
function Effects() {
if (isEffectadded == 'YES') {
var imgd = ctxEffect.getImageData(0, 0, canvas.width, canvas.height);
var pix = imgd.data;
switch (EffectType) {
case "black":
for (var i = 0, n = pix.length; i < n; i += 4) {
var grayscale = pix[i] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11;
pix[i] = grayscale; // red
pix[i + 1] = grayscale; // green
pix[i + 2] = grayscale; // blue
}
ctxEffect.putImageData(imgd, 0, 0);
break;
case "contrast":
var contrast = 40;
var factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
for (var i = 0; i < pix.length; i += 4) {
pix[i] = factor * (pix[i] - 128) + 128;
pix[i + 1] = factor * (pix[i + 1] - 128) + 128;
pix[i + 2] = factor * (pix[i + 2] - 128) + 128;
}
ctxEffect.putImageData(imgd, 0, 0);
break;
case "invertColors":
for (var i = 0; i < pix.length; i += 4) {
pix[i] = 255 - pix[i];
pix[i + 1] = 255 - pix[i + 1];
pix[i + 2] = 255 - pix[i + 2];
}
ctxEffect.putImageData(imgd, 0, 0);
break;
case "OriginalImage":
for (var i = 0; i < pix.length; i += 4) {
pix[i] = pix[i];
pix[i + 1] = pix[i + 1];
pix[i + 2] = pix[i + 2];
}
ctxEffect.putImageData(imgd, 0, 0);
break;
}
}
}
在这里，我们可以看到每个滤镜照片的输出。第一个是黑白照片。将捕获的照片更改为黑白。
接下来，我们有反色照片。将捕获的照片反色，如下所示
接下来，我们将为捕获的照片添加对比度，就像下面一样
最后，我们有最初从网络摄像头捕获的原始照片。
保存并发送电子邮件
在发送电子邮件按钮的客户端单击事件中，我将 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();
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);
}
catch (Exception ex)
{
}
}
注意：在这里，我使用 smtp.gmail.com 作为主机，并在 System.Net.NetworkCredential(userGmailEmailID, userGmailPasswod); 中，您需要提供您的 Gmail 电子邮件地址和 Gmail 密码才能发送电子邮件。
我已像下面一样将变量声明为 global，以便用户可以添加自己的 Gmail 电子邮件地址和 Gmail 密码。
String userGmailEmailID = "YourGamilEmailAddress";
string userGmailPasswod = "YourGmailPassword";
发布照片到 Facebook
要将我们的照片发布到 Facebook，我们需要一个 Facebook APPID。要创建我们的 APPID，请转到 https://developers.facebook.com/ 并使用您的 Facebook ID 登录。
登录后，要创建新的 App ID，请输入您的显示名称，然后点击创建 App ID。
现在您可以看到您的 App ID 已创建。您可以使用此 App ID 将您的图像发布到 Facebook。
点击设置并添加您的网站 URL，如果您正在本地开发，可以在站点 URL 中给出如下本地主机 URL
点击设置 -> 高级，并将嵌入式浏览器 OAutho 登录设置为“是”。
发送到 FB
使用 Facebook API，我们可以使用我们的 App ID 将 Canvas 转换为 base64 图像并发送到 Facebook。 这是参考链接，其中解释了如何将 HTML5 Canvas 5 图像转换为 base64 并嵌入。
<INPUT TYPE ="Button" id="btnFB" VALUE=" Send to FB " onClick="sendtoFB()">
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: 'yourFaceBookAppID', // 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'
});
});
}
}
当用户点击“发送到 FB”按钮时，他们可以登录他们的 Facebook 以发布 canvas 照片。
照片发布后，我们就可以在我们的 Facebook 页面上看到新照片了。
注意：如果您的照片在 Facebook 上对其他用户不可见，那么您需要将您的应用设置为“上线”。要使您的应用上线，请转到您的 App Facebook 页面，选择设置，然后选择“您是否希望此应用及其所有实时功能都可供公众使用？”
测试过的浏览器
- Chrome
- Firefox
- Internet Explorer 10
历史
- 2015 年 6 月 10 日：初始版本