Hi, This is a good library for cropping image and working well for m

I made it! Example: <div class="snippet-clipboard-content not

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

How to save cropped image to to jpg or Data URI? about jcrop HOT 2 CLOSED

Kamoba commented on June 25, 2024

How to save cropped image to to jpg or Data URI?

from jcrop.

Comments (2)

Kamoba commented on June 25, 2024

I made it!
Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Jcrop Example</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="jcrop.css" />
  </head>
  <body>

    <div style="padding:0 5%;">
    <h1 style="font-family:Helvetica,sans-serif;">
      Jcrop Example <span style="color:lightgray;">- draw some crops!</span>
    </h1>

    <img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">

    </div>

    
	<canvas id="myCanvas" width="100" height="50" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
	
    <script src="jcrop.js"></script>

    <script>
	  setImage();
      var jcp;
      Jcrop.load('target').then(img => {
        jcp = Jcrop.attach(img,{multi:false});
        const rect = Jcrop.Rect.sizeOf(jcp.el);
        jcp.newWidget(rect.scale(.7,.5).center(rect.w,rect.h));
        jcp.focus();
		jcp.setOptions({shadeOpacity:0.8});
      });
	  
      // to fix security issue when trying to convert to Data URI
      function setImage(){
	    document.getElementById('target').setAttribute('crossOrigin', 'anonymous');
        document.getElementById('target').src = 'https://d3o1694hluedf9.cloudfront.net/market-750.jpg';
      }

	  function getCoord(){
		console.log(jcp.active.pos);
		//document.querySelector("div.jcrop-widget.active").style.background = "red";
		return jcp.active.pos;
	  }
	  setTimeout(function(){
	  document.querySelector("div.jcrop-widget.active").addEventListener("click", getCoord);
	  },1000);
	  

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	function cropImage() {
		let coords = getCoord();
		console.log("coords",coords);
		// reset canvas
		c.setAttribute("width", coords.w) ;
		c.setAttribute("height", coords.h);
		ctx.clearRect(0, 0, coords.w, coords.h);  // clear canvas
		// add cropped image in canvas
		var img = document.getElementById("target"); 
		ctx.drawImage(img, coords.x,coords.y,coords.w,coords.h,0,0,coords.w,coords.h);   //drawImage(sx,sy,swidth,sheight,x,y,width,height)
		// convert canvas to DATA URI
		var imgData = c.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
		console.log(imgData);
	}
    </script>


<button onclick="cropImage()">Crop it!</button>
  </body>
</html>

from jcrop.

Utsaww commented on June 25, 2024

@Kamoba how to download image with multi-crop I set jcp = Jcrop.attach(img,{multi:false}); while console console.log(imgData); on button click user can also download the image how can we do, Please help

from jcrop.

Recommend Projects