Cropping scaled down images - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

Cropping scaled down images

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <style id="compiled-css" type="text/css">

img{display:none;}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){/*from  w  w  w.  j  av  a 2  s.co m*/
var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d"),
    img = document.getElementsByTagName("img")[0];
canvas.width = 600;
canvas.height = 400;
context.drawImage(img, 0,0,600,400);
var croppedCanvas = document.getElementById("tempCanvas"),
    croppedCtx = croppedCanvas.getContext("2d");
croppedCanvas.width = 400;
croppedCanvas.height = 200;
croppedCtx.drawImage(img, 0, 0);
    });

      </script> 
   </head> 
   <body> 
      <h2>Original scaled to fit canvas size 600x400</h2> 
      <canvas></canvas> 
      <h2>Cropped Image</h2> 
      <canvas id="tempCanvas"></canvas> 
      <img src="http://www.my-spot.com/images/earth1024.jpg">  
   </body>
</html>

Related Tutorials