Preview and Download Html2Canvas

Here is the code for converting html into canvas.

When we click on Preview button canvas will be show and click on Download canvas will be save in .png format.


<!DOCTYPE html>
<html>
<head>

<!-- include jquery.min.js and html2canvas.js -->
  <script src="jquery/3.1.1/jquery.min.js"></script>
  <script src="jquery/html2canvas.js"></script>

<style>
  #previewBody{
    background-color: #9E9E9E;
    color: #fff;
    padding: 5px 0px 27px 30px;
    width: 46%;
    margin-bottom: 15px;
}
input#PreviewImage {
    margin-bottom: 15px;
}
</style>

<script>
    $(document).ready(function(){
    var getCanvas;
    function callCanvas(){
    html2canvas($("#previewBody"), {
    onrendered: function(canvas) {
    $(".preview_Canvas").html(canvas);
    getCanvas = canvas;
    }
  });
}
   $("#PreviewImage").on('click', function () {
    callCanvas()
    });
   $("#downloadimage").on('click', function () {
      var imgageData = getCanvas.toDataURL("image/png");    
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#downloadimage").attr("download", "your_pic_name.png").attr("href", newData);
  });
});
</script>
</head>
<body>
<div id="previewBody">
  <h2>CANVAS Example</h2>
  <p>Click on preview will show canvas </p>
  <p>Click on download will download the canvas in .png format</p>
   </div>
    
        <input id="PreviewImage" type="button" value="Preview"/>
        <a id="downloadimage" href="#">Download</a>
        <div class="preview_Canvas">
        </div>
</body>
</html>

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
  

Populate Select box dynamically by ajax in Cakephp

To populate a select box by cakephp ajax functionality.
Step 1.
In the end of your view (.ctp)file.This is your javascript code in cake.

<?php
$this->Js->get('#select1')->event('click', 
$this->Js->request(array('controller'=>'ControllerName','action'=>'ajax_call'), array(
'update'=>'#select2',
'async' => true,
'method' => 'post',
'dataExpression'=>true,
'data'=> $this->Js->serializeForm(array(
'isForm' => true,
'inline' => true))
))
);
?>

Step 2.
In your controller file create function with that returns options string

public $helpers = array('Js'); //load Js helper
public function getBySubject(){
	
		$this->autoRender=false; //prevent to load default layout
$option;		
//your code
		printf($option);
		}

step 3.
In the end or your layout file after your loaded scripts

<?php
if (class_exists('JsHelper') && method_exists($this->Js, 'writeBuffer')) echo $this->Js->writeBuffer();
// will write your cached scripts
?>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
  

Detect Mousewheel events by jQuery

$(function () {
   var isChrome = !!window.chrome && !!window.chrome.webstore; //use to resolve browser compatibilty issue.
   var functionname="mousewheel.focal";
   if(!isChrome)
	functionname="DOMMouseScroll";
   $('Selector').bind(functionname, function{
	var delta = (isChrome) ? e.delta || e.originalEvent.wheelDelta : e.originalEvent.detail;
        if(isChrome && delta < 0){
	     //scroll down in chrome
	 }
        elseif(isChrome && delta > 0){
            //scroll up in chrome
	}
        elseif(!isChrome && delta > 0){
            //scroll down in mozilla
	}
        else{
            //scroll up in mozilla
	}
	return false;
    });
});

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
  

Grouping of select box options through javascript

Your select box 

<select>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
<option value="fff">fff</option>
</select>
<script type="text/javascript">
$(function () {
    var $cont = $('select');
   
    $('select option').each(function () {
        if ($(this).text().indexOf('aaa') === 0 || $(this).text().indexOf('ddd') === 0) {
            $('<optGroup/>').attr('label', $(this).text()).appendTo($cont);
            $(this).remove();
        } else {
            $cont.find('optGroup').last().append($(this));
            $(this).text($(this).text());
        }
    });
    });

</script>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
  

How to disable cut copy paste on webpage using jQuery

Here is the jQuery code to prevent users to cut copy and paste from our website.

1.  disable cut copy and paste on a specific element like a textbox

Step 1 . First we create a div and assign a unique id to this div .

<div id="targetElement">
this is our div content .
</div>

Step 2  We are using jQuery so we need to call jQuery library before our jquery code. in this tutorial we are using google cdn jquery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

 

Step 3. Now paste this code below your jquery library and this jquery code will prevent cut copy and paste from your specific element.

<script type="text/javascript">
$(document).ready(function(){
$('#targetElement').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>

here is the full source code

<div id="textField1">
this is our demo text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#textField1').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>

2. Disable cut copy paste on webpage
We can disable cut copy and paste from our complete webpage by using this jQuery code.

$(document).ready(function () {
//Disable cut copy paste
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
});

3. Disable right click on webpage to prevent cut copy and paste.
We can also disable right click on our webpage to prevent cut copy and paste from our webpage.to disable right click on webpage use this jQuery code.

//Disable mouse right click
$("body").on("contextmenu",function(e){
return false;
});

4. Disable cut copy paste using html
Yes, We can also use html and modify body tag to prevent cut copy and paste.

<body oncopy="return false" oncut="return false" onpaste="return false">

To disable mouse right click with html use modify you body tag like this.

<body onContextMenu="return false">

Thank You.

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
  
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.