HTML5 Canvas Image Rotation

in , , - on Wednesday, October 17, 2012 - No comments

As I have done some research on HTML5 canvas with image rotation.
Found that  we can rotate the canvas to left, right and mirror the image in just few lines of code.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotate Canvas</title>
<script type="text/javascript">
function rotate(p_deg)
{

switch(p_deg) {
   default :
   case 0 :
canvas.setAttribute('width', image.width);
canvas.setAttribute('height', image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, 0);
break;
   case 90 :
canvas.setAttribute('width', image.height);
canvas.setAttribute('height', image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, -image.height);
break;
   case 180 :
canvas.setAttribute('width', image.width);
canvas.setAttribute('height', image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, -image.height);
break;
   case 270 :
   case -90 :
canvas.setAttribute('width', image.height);
canvas.setAttribute('height', image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, 0);
break;
};
}
</script>
</head>
<body>
<p>
rotate:
    <input type="button" value="0°"  onclick="rotate(0);" />
    <input type="button" value="90°"  onclick="rotate(90);" />
    <input type="button" value="180°"  onclick="rotate(180);" />
    <input type="button" value="-90°"  onclick="rotate(-90);" />
</p>
<canvas id="canvas">Your Browser doesn't support canvas</canvas>
<p> Orginal Image</p>
<img id="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFAUav2b7rd51Qpdjl8i1ChXPV1lfLbVigmP8rZ-6QsxkjwR6MWQzRWlg6Mn371nRYC2e2KFtFJSuh_k_ZK8IB-ceSbFFNxg9gFaTnVb68Cj-ga2eK9LYNvT2T_MFN-MNwJv-51q3GG0/s320/Karva+Chauth.jpg" alt="" />
<script type="text/javascript">
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
canvasContext.drawImage(image, 10, 10);
</script>
</body>
</html>


All the best guys........
Read more
Labels: , ,

How to call external URL and print response

in , - on Thursday, September 20, 2012 - No comments

Sending the data of one page to another, Sending the data of one page to another and printing response, Call external URL and print response, How to send the data to another URL and print the response on the page, How to Call external UR's,

//  Getting the data from called page
// we can use GET method or POST method depends on the calling page
print_r($_GET )
$name = $_GET['name'];
$email = $_GET['email'];
$company = $_GET['company'];
$phone = $_GET['phone'];
$country = $_GET['country'];

// Encoding the values to URL
$name = urlencode($name);
$email = urlencode($email);
$company = urlencode($company);
$phone = urlencode($phone);
$country = urlencode($country);

// Sending the values to another URL
// it reads the entire file into string
$response = file_get_contents('http://websitename.com/finename.fileExtension?name='.$name.'&email='.$email.'&company='.$company.'&phone='.$phone.'&country='.$country.''');

// Printing the response
echo $response; 

Here is description of file_get_contents() function. Click here
Read more
Labels: ,

Currency Converter Using Google Finance

in , - on Saturday, August 18, 2012 - No comments
Currency Converter Using Google Finance, Currency Converter Using PHP, Currency Converter code PHP

/**
* @abstract To covert the currency from one country to another
* @param $currencyFrom
* @param $currencyTo
* @param $amount
* @return $convertedCurrency
*/
function convertCurrency( $currencyFrom, $currencyTo, $amount )
{
// Encoding the string
$amount = urlencode($amount);
$currencyFrom = urlencode($currencyFrom);
$currencyTo = urlencode($currencyTo);

// Passing the given values to the url
$url = "http://www.google.com/finance/converter?a=$amount&from=$currencyFrom&to=$currencyTo";

// Initializing a cURL session
$ch = curl_init();
$timeout = 0;

// Setting an option for a cURL transfer
curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);

// Performing a cURL session
$rawdata = curl_exec($ch);

// Closing a cURL session
curl_close($ch);

// Split the data with string bld>
$data = explode('bld>', $rawdata);
$data = explode($currencyTo, $data[1]);

// rounding the converted floating point value
$convertedCurrency = round($data[0], 2);

return $convertedCurrency;
}
Read more
Labels: ,

Analytics