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

Kamoba · 2020-04-04T23:35:14Z

Hi,

This is a good library for cropping image and working well for mobile.
I guess this library is not meant to cover the next steps after cropping the image, but it would be nice to have an example of how to use the coordinates to extract that part of the image.
Do someone has an example of how to save cropped image to jpg or Data URI?

Thanks

Kamoba · 2020-04-05T03:01:15Z

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>

Utsaww · 2022-02-10T07:54:56Z

@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

Kamoba closed this as completed Apr 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Kamoba commented Apr 4, 2020

Kamoba commented Apr 5, 2020 •

edited

Loading

Utsaww commented Feb 10, 2022

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

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

Comments

Kamoba commented Apr 4, 2020

Kamoba commented Apr 5, 2020 • edited Loading

Utsaww commented Feb 10, 2022

Kamoba commented Apr 5, 2020 •

edited

Loading