CodeCarvings Piczard V1.2 Help
Client-Side Load, Unload And Save Images
Send Feedback
Piczard Fundamentals - Web > PictureTrimmer > Client-Side Load, Unload And Save Images

Glossary Item Box

CONTENTS

  1. Introduction
  2. Load an image with javascript
  3. Unload the current image with javascript
  4. Save (process) an image with javascript

 

Please see the Example A.307 - "Web - PictureTrimmer / Client side load, unload and save images"

 

 

1. Introduction

Piczard does not provide javascript methods that allow to directly load or save images with client-side code.
In order to achieve this kind of result it's necessary to write some javascript lines and use the PictureTrimmerCore class (InlinePictureTrimmerCore Class or PopupPictureTrimmerCore).

The PictureTrimmerCore class is very similiar to the PictureTrimmer class.

Differently from the PictureTrimmer class, the PictureTrimmerCore class is not a WebControl.
This makes it a much lighter class that can be used even outside of ASPX pages.

The main purpose of the PictureTrimmerCore class is to handle the current state of a PictureTrimmer control and to provide almost the same methods and properties offered by the PictureTrimmer class.

 

 

2. Load an image with javascript

In order to load an image the steps to follow are the following:

  1. (Client-Side) - Invoke the method get_coreJSONString to get current state of the control (serialized as a JSON string).
    This value must be sent to the Server-Side (e.g. to a HttpHandler).
    The Example A.307 uses Ajax, in particular it uses the jQuery post method
  2. (Server-Side) - The sent value can be used to instantiate a PictureTrimmerCore object.
  3. (Client-Side) - The  JSON data generated on the Server-Side must be loaded in the control by using the load method.

 

Example:

Load / Clent-Side (ASPX) Copy Code
<script type="text/javascript">
   
//<![CDATA[
   function myLoadImageFunction()
   {
       
// Get the PictureTrimmer instance
       var
oInlinePictureTrimmer = CodeCarvings.Wcs.Piczard.PictureTrimmer.getControl("<% =this.InlinePictureTrimmer1.ClientID %>");
 
       var
url = "MyLoadImageHelper.ashx";
       var
dataToBeSent = {
           coreJSONString: oInlinePictureTrimmer.get_coreJSONString()
       };
       $.post(url, dataToBeSent, function(data)
       {  
           
// Load the JSON Attach Data
           oInlinePictureTrimmer.load(data);
       },
"json");
   }

   
//]]>
</
script>  
<ccPiczard:InlinePictureTrimmer runat="server" ID="InlinePictureTrimmer1" />
<
a href="#" onclick="myLoadImageFunction(); return false;">Load image</a>
Load / Server-Side (ASHX) Copy Code
using System;
using System.Web;
using CodeCarvings.Piczard;
using CodeCarvings.Piczard.Web;
public class LoadImageHelper : IHttpHandler
{
   
   
public void ProcessRequest (HttpContext context)
   {
       
// Load the picture trimmer core
       
PictureTrimmerCore pictureTrimmer = PictureTrimmerCore.FromJSON(context.Request["coreJSONString"]);
       
// Load the image
       
string imagePath = "~/myFolder/myImage.jpg";
       pictureTrimmer.LoadImageFromFileSystem(imagePath,
new FreeCropConstraint(null, 500, null, 500));
       
// Return the new JSON
       
context.Response.ContentType = "application/json";
       context.Response.Write(pictureTrimmer.GetAttachDataJSON());
   }

   
public bool IsReusable {
       get {
           
return false;
       }
   }
}

 

 


3. Unload the current image with javascript

In order to unload the current image loaded in a PictureTrimmer instance you only have to invoke the javascript method unloadImage

Example:

Unload / Clent-Side (ASPX) Copy Code
<script type="text/javascript">
   
//<![CDATA[
   function myUnloadImageFunction()
   {
       
// Get the PictureTrimmer instance
       var
oInlinePictureTrimmer = CodeCarvings.Wcs.Piczard.PictureTrimmer.getControl("<% =this.InlinePictureTrimmer1.ClientID %>");
       
// Unload the image
       oInlinePictureTrimmer.unloadImage();
   }

   
//]]>
</
script>
<ccPiczard:InlinePictureTrimmer runat="server" ID="InlinePictureTrimmer1" />
<
a href="#" onclick="myUnloadImageFunction(); return false;">Unload image</a>

 

 

4. Save (process) an image with a javascript

In order process an image (apply the current PictureTrimmerValue) the steps to follow are the following:

  1. (Client-Side) - Invoke the method get_coreJSONString to get current state of the control (serialized as a JSON string).
    This value must be sent to the Server-Side (e.g. to a HttpHandler).
    The Example A.307 uses Ajax, in particular it uses the jQuery post method
  2. (Server-Side) - The sent value can be used to instantiate a PictureTrimmerCore object.

 

Example:

Save/ Clent-Side (ASPX) Copy Code
<script type="text/javascript">
   
//<![CDATA[
   function mySaveImageFunction()
   {
       
// Get the PictureTrimmer instance
       var
oInlinePictureTrimmer = CodeCarvings.Wcs.Piczard.PictureTrimmer.getControl("<% =this.InlinePictureTrimmer1.ClientID %>");

       var
url = "MySaveImageHelper.ashx";
       var
dataToBeSent = {
           coreJSONString: oInlinePictureTrimmer.get_coreJSONString()
       };
       $.post(url, dataToBeSent, function(data)
       {
           alert(
"Image saved!");
       },
"json");
   }

   
//]]>
</
script>
<ccPiczard:InlinePictureTrimmer runat="server" ID="InlinePictureTrimmer1" />
<
a href="#" onclick="mySaveImageFunction(); return false;">Save image</a>
Save / Server-Side (ASHX) Copy Code
using System;
using System.Web;
using CodeCarvings.Piczard;
using CodeCarvings.Piczard.Web;
public class SaveImageHelper : IHttpHandler {
   
public void ProcessRequest (HttpContext context)
   {
       
// Load the picture trimmer core
       
PictureTrimmerCore pictureTrimmer = PictureTrimmerCore.FromJSON(context.Request["coreJSONString"]);
       
// Process the image
       
string outputImageFilePath = "~/myFolder/myOutputImage.jpg";
       pictureTrimmer.SaveProcessedImageToFileSystem(outputImageFilePath);
       
// Return something...
       
context.Response.ContentType = "application/json";
       context.Response.Write(
"{myResultCode:1}");
   }
   
public bool IsReusable {
       get {
           
return false;
       }
   }
}

 

©2013 Sergio Turolla. All Rights Reserved.