ابزار ویرایش تصویر در HTML

پنجشنبه 21 خرداد 1394

یکی از مزایای ابزار سمت کاربر بودن نرم افزار این است که ترافیک سمت سرور را کاهش میدهد ، در این مقاله با استفاده از HTML5 یک ابزار برای ویرایش تصویر در سمت کاربر با ذکر مثال ایجاد می کنیم.

ابزار ویرایش تصویر در HTML

نکته : برای اجرای نرم افزار باید یک وب کم به سیستم خود متصل داشته باشد .

پس از اجرای نرم افزار , ابتدا تصویر خود را با استفاده از وب کم ذخیره یکنید , این عملیات با استفاده از Webcam.JS  انجام میشود .شما می توانید اسکریپت مربوطه را از اینجا دریافت نمایید .

Webcam.JS : یک کتابخانه JavaScript میباشد که برای درج تصویر از وب کم استفاده میشود .

Add Sticker : برای افزودن برچسب , از این دستور استفاده می کنیم .

Add Border : برای افزودن حاشیه در اطاف تصویر از این دستور استفاده می کنیم .

Add Text : برای افزودن متن به همراه تصویر از این دستور استفاده می کنند .

Add Filter:  برای افزودن فیلتر از این دستور استفاده می کنیم .مانند Contrast,Black & White و غیره .

Save and Send Email : آخرین ویرایش تصویر که ثبت و ارسال در آدرس نرم افزار استفاده میشود .همچنین می توانیم از این دستور برای ارسال ایمیل نیز استفاده کنیم .

برای این کار میتوانیم نرم افزار ویژوال استودیو را اجرا کنیم ، سپس یک web application ایجاد می کنیم .

هدف اصلی نرم افزار استفاده آسان از نرم افزار برای ثبت تصویر و ارسال آن از طریق ایمیل آدرس می باشد .

HTML5 : که نسخه جدید از HTML می باشد , همچنین HTML5 میتواند cross-platform را پشتیبانی کند ، که به این معنی میباشد که HTML5 هم میتواند pc,Tablet و smartphone های مختلف را پشتیبانی می کند .تگ html5 باید در داخل body ذکر شده قرار گیرد :

<!DOCTYPE html> <html> <body></body> </html>   

برخی از امکانات جدید در HTML5 که شامل Canvas , Audio , Video میباشد .

Canvas : یک عنصر دو بعدی برای درج تصاویر توسط JavaScript میباشد .برای ایجاد تصاویر دو بعدی می بایست از JavaScript استفاده کنیم .

در ابتدا Refrence مورد نظر را به پروژه اضافه میکنیم .

برای افزودن امکان ثبت تصویر توسط وب کم در مرورگر کد زیر را در صفحه قرار میدهیم .

<table >  
   <tr>  
       <td align="center">  
           <div id="my_camera"></div>  
         <!-- Configure a few settings and attach camera -->  
    <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 استفاده شده است .

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', '');  
   });  
} 

همچنین تگ زیر را در صفحه افزایش میکنیم

SECTION style="border-style: solid; border-width: 2px; width: 600px;">  
  
<CANVAS HEIGHT="452" WIDTH="600px" ID="canvas">  

مرورگر شما ممکن است که html5 را پشتیبانی نکند .همچنین می توانید مرورگر خود را از طریق تگ های زیر بررسی نمایید :

</CANVAS>  
  
</SECTION>  

 قسمت دستورات در JavaScript :

در ابتدا لینک منابع JavaScript و style صفحه در قسمت head صفحه قرار می دهیم .

<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 and etc  
    var ImageNames = new Array();  
    var imageCount = 0;  
    var imageObj = new Image();  
    var imageObj_BG = new Image();  
var newImagename = '';  
  
// For the Filters effects adde to photo like Contrast,Black&White and etc.  
    var isEffectadded = 'NO';  
    var EffectType = 'black';  
    var DrawBorder = "No";  
  
//Clear the Canvas  
function clear() {  
        ctx.clearRect(0, 0, WIDTH, HEIGHT);  
    } 

متد () init :این متد یک متد مهم برای رویداد کلیک دکمه میباشد ، این تابع در هنگام ارسال هر نوع تابعی ، فراخوانی میشود .در این متد ما یک متغیر برای canvas ایجاد کرده ایم .

//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()">  

سپس کد زیر را اضافه می کنیم :

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', '');  
   });  
}  

در این متد ما "BG" را فراخوانی کرده ایم ، و در متد ابتدایی ابتدا "DrawType="BG را بررسی میکند و اگر true باشد ، تصویر ثبت شده را در canvas قرار میدهد .

if (DrawType = 'BG') {  
  
   ctx.drawImage(imageObj_BG, 1, 1, canvas.width - 1, canvas.height - 1);  
  
}  

افزودن حاشیه / متن/ برچست به تصویر ثبت شده :

در رویداد کلیک دکمه مربوط به حاشیه ، ما DrawType را به عنوان "حاشیه" ارسال میکنیم و در رویداد MouseMove متد ()draw را فراخوانی میکنیم .

<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')"/>  
  
//Darw all Shaps,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();  
    }  

افزودن فیلتر به تصویر :

برای افزودن فیلتر به تصویر ثبت شده ، باید یک تابع ایجاد کنیم :

<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 alll 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      
  
                        // alpha         
                    }  
  
                    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;  
                    }  
                    // overwrite original image  
                    ctxEffect.putImageData(imgd, 0, 0);  
                    break;  
  
                case "invertColors":  
                    for (var i = 0; i < pix.length; i += 4) {  
                        // red  
                        pix[i] = 255 - pix[i];  
                        // green  
                        pix[i + 1] = 255 - pix[i + 1];  
                        // blue  
                        pix[i + 2] = 255 - pix[i + 2];  
                    }  
                    // overwrite original image  
                    ctxEffect.putImageData(imgd, 0, 0);  
                    break;  
  
                case "OriginalImage":  
                    for (var i = 0; i < pix.length; i += 4) {  
                        // red  
                        pix[i] = pix[i];  
                        // green  
                        pix[i + 1] = pix[i + 1];  
                        // blue  
                        pix[i + 2] = pix[i + 2];  
                    }  
                    // overwrite original image  
                    ctxEffect.putImageData(imgd, 0, 0);  
                    break;  
            }  
        }  
    }  

نحوه ارسال تصویر از طریق ایمیل :

در رویداد کلیک دکمه "ارسال" دستورات زیر را می نویسیم :

 <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 !');  
    }  
  
}  

در رویداد کلیک ، مقدار را از hidenfield دریافت میکنیم ، و در نتیجه ذخیره میکنیم .

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);  
        }  
    }  
}  

در متد زیر محتوای ایمیل را به صورت قالب ارسال میکنیم که این قالب شامل موضوع ، تصویر و متن میباشد .

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;  
    }  
  
  
  
}  

نحوه قرار دادن در facebook :

برای این کار ما به یک APPID احتیاج داریم ، برای ساخت اکانت باید به سایت https://developers.facebook.com مراجعه کنید و پس از ثبت نام و ورود به پنل کاربری ،

اکنون شما App ID را ایجاد کرده اید که میتوانید از این طریق تصویر را در facebook ثبت کنید .

در قسمت Setting رقته ، آدرس وب سایت خود را اضافه می کنید :

همچنین در setting --> Advanced می بایست theEmbedded Browser را در حالت Yes قرار دهید .

در آخر در دستور رویداد دکمه "ارسال به Facebook" دستورات زیر را می نویسیم :

    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('//connect.facebook.net/en_US/all.js', function () {  
                    // Load the APP / SDK  
                    FB.init({  
                        appId: '398343823690176', // 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'  
                    });  
                });  
      
            }  
      
        }  

 

فایل های ضمیمه

احسان حسینی

نویسنده 42 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

تاکنون هیچ کاربری از این پست تشکر نکرده است

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید