Member Avatar for billymcguffin

hello,
i was wondering if there is a way to automatically crop a picture, or only show a specific part of it with javascript.

i dont know if this is important or not, but i want the cropped picture to fill the div its in, no matter what size the div is.

thanks,
billy

  • 4 Contributors
  • 6 Replies
  • 100 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for JugglerDrummer

You can just set with width property of the <img> to 100% in CSS. I don't think IE 6 likes that though. :D

Member Avatar for billymcguffin

i know. the main reason for this post is to ask how i can crop a picture with javascript.

Member Avatar for mail2saion

You will get a lot of script & tool which is free. just google "crop an image using javascript"

Member Avatar for essential

I'm not sure if this is what you exactly needed, but maybe this will help...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test Page</title>

<style type="text/css">
/* <![CDATA[ */

div {
  border : none;
  margin-top : 1em;
  padding : 0%; }

div#myDiv {
   margin-top : 1em;
   width : 300px;
   height : 300px; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var crop;
crop = function( img, div, x, y ) {
   try {
   div = (( document.getElementById ) ? document.getElementById( div ) : document.images[ div ] );
   img = (( document.getElementById ) ? document.getElementById( img ) : document.images[ img ] );
      if ( arguments.length <= 4 ) { 
         try {
         div.style.border = "thin dashed #000";
         div.style.width = x;
         div.style.height = y;
         div.style.background = "transparent url(" + img.src + ") no-repeat center left"; 
         (( img.style.display !== "none" ) ? img.style.display = "none" : img.style.display = "block" );   
         } catch( e0 ) { }
      } else { 
      throw "error";
      }
   } catch( e ) { (( e === "error" ) ? alert( "Missing argument's!" ) : alert( e.message ));
   }
};
// ]]>
</script>
</head>
<body>
<div id="myDiv">
<h3 style="color : #f00; text-align : center;">Click Image!</h3><img  id="image1" src="./image1.jpg" alt="image1.jpg" onclick="crop( 'image1', 'myDiv', '100px', '100px');" />
</div>
<h4>INSTRUCTION:</h4>
<p>
<em><b>SYNTAX&#8212;</b><br />
<code>crop( [ img, [ div, [ x, [ y ] ] ] ] );</code></em></p>
<p style="color:#190">
The <samp>crop()</samp> function comes in 4 parameters:
</p>
<b><em>PARAMETERS &#8212;</em></b>
<ol style="line-height: 1.6">
<li><span style="color:#800000">img ~</span> Image id</li>
<li><span style="color:#800000">div ~</span> Id of the element that hold's your image.</li>
<li><span style="color:#800000">x ~</span> Xpos</li>
<li><span style="color:#800000">y ~</span> Ypos</li>
</ol>
</body>
</html>
Member Avatar for billymcguffin

thanks essential, that looks like it will work with a bit of editing.

Member Avatar for essential

You can use the CSS overflow w/ javascript to fill in the whole div with the image's you want-- and then set your Image ( width/height = div width/height ) to fill up its content.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.