0

I have a form with an image inside as such:

<body>
  <form action="" method="POST" id="canvas">
    <img src="/foo/bar.jpg" width="350" height="350" id="imageId"/>
    <input type="submit" name="submit" value="Label" id='input'>
  </form>
</body>

Using JavaScript, I'd like to be able to save a portion of the image using coordinates, I'm looking for something like this:

Save_Image(x, y, x2, y2, name_of_new_cropped_image_to_be_saved);

Does something like this exist?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
yalpsid eman
  • 3,064
  • 6
  • 45
  • 71
  • 3
    Possible duplicate of [crop image using coordinates](https://stackoverflow.com/questions/38750612/crop-image-using-coordinates) – Alex Jun 25 '18 at 16:27

1 Answers1

0

You can try canvas:

function cropImage(src, x, y, w, h) {
  var canvas = document.createElement("canvas");
  //document.body.appendChild(canvas); // for testing
  var ctx = canvas.getContext("2d");
  canvas.width = w;
  canvas.height = h;
  ctx.fillRect(0, 0, w, h);
  ctx.drawImage(src, -x, -y);
  return {
    save: function(filename) {
      var a = document.createElement("a");
      canvas.toBlob(function(blob) {
        a.href = window.URL.createObjectUrl(blob);
        a.download = filename;
        a.click();
      });
      //console.log(a);
    }
  }
}

var img = document.querySelector("img");
document.getElementById("save").onclick = function () {
  cropImage(img, 50, 20, 100, 80).save("test");
}
body {
  background: black;
  overflow: auto;
}
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADIBAMAAAA0O6rRAAAAG1BMVEX///8zPtvMzvZmbuSZnu1/hujl5vqytvFMVt+W5DZNAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFLUlEQVR4nO2bzXfbRBTFHdmWvESYFC9jpzQsMWk5XSYk0C5r6Cks5dADW2ySlmXNKdR/djWSP2Y0741G9juVHO5vFc2Mdd+VNPNGM0qrBQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuDecnp9/ex80WsM4/vw+aMBI0zRgpGkaMNI0DRhpmgaMNE0DRpqmASNN04CRpmnASNM0/l9GwrO3128fuRqM0gZztkVDjERXccbgl4RuEKwaxPGTZ2STZhi5izcc/0k1+CrWGDw+2UFDgjKRv40wCSdGg+zGVdbYi851ziS90NcaPzrD7CfF8/wWW3xZUWM/juwAzCj0MAfn50+p6rQDrX+3XC6sU/hpfAojQRbc+zfq7/AuO7gwT3OZP03ZgBWeXS0aamSmSl6tj6JxevSFcZZOZjTZHIe34yYaycLUHuhoUbwlM8taePeJjbSXOWlsg6XGP1ob9dzox1mX0cefMCb6f7AZtnw0xHAMjaojH5tFkzSkZHvYTVt8s5eGHA6RaRrmC7OoaxalLQb7acjhEEn7bZ8o05pf+kVYsxHV1d8VC6eGuYXXk1W3kV5q5KRYGOmFqq+T0y9vDUF4kUurqysWWidRrvbTEIQXSUN+YJfOtNKOX1+v2UhUTH45PS2fdYnRoJKGJKxIOzWS2MUdLfjDMDIlu0gr0PpF9yAerRlTsdgOW52D6OzpbOQzpvxi9WdEDdBVNCRhRbhkN9uWB/R44K8hCScSckEOtXxP5f4KGqJwIgH32BxpiWRcfBuppiEKJ8Jm7Z72g6FfJ6nVCDu0trWMqKZjRPb31RCFE2lzya6rPU7q+fO4JbUa6dH5MEse2wr1Mnyc7KohCidyxPVjw4iax5Q7qdsIvdgRGc+cWiGK+2920xCFE5k6ZsWakU6+wEMtXZdriOIwYqzXbvjBHM6+jsut1GpkyCyuKYxx+XlcauUwjGydxPaGgltDlP2NaDs9xyeVNEQRMNKKfl3X9MlFlbqN9M8ZnlitH47XHikndRupJP7H6q7Ye1oHZqTVep3fFSKN1p1Hqm5jhPn4deGtIYqgkVbrVBmxp2h1z7V8Xv4KZHne6u/NnMa7maRG/vPVEKXyi5UbNYm0LkAzX3VLULck8dQQhRPpEAH50CPGrWYuB5WgfvfOU0OUygt0ZYzthZVmLpmWMbNP2MxF7DKmdgKqfVthp08tiARU+0bPLolEJaC6jNAXntl6K4U2IvodDQk7OVSr2C/IGjeEkZ0moFUh+uYKenu6lJ59Ql5DkCN2ckh/MOBzwuLl5zUE6bF9mvyEoxwij/AagrTZyWGHmpGXM7bzD68hSJcfnBa7XEg11yrOCBwackTUK13OkIiplDZxPoeGHCEfrXq23LcksYsmxGPk0BBkwadd8r1Vx97i6ZILQg4NOS75y96mVneCn7d/W0uk4ZhMow4NOdJsFX/H1KmwBhdG0euFFlJa/ZNRq/YU9c9QPTTE6OrBBldWnRGrWhg1jcT9+eYwUM8i9TC6NMQIs2AfP0qyb9sLHXWWr+c+y759v7nNvvQvGEkLXs6T7Mv4fBk7qaghxsyxYxBsVtmXy83WwbZ6Etu8ahG4NMSIXCLZ5/Am2rQpfG7VfqiuIcapSyQam4EOzN79sGD0/S4aYvxFXu4V4ZUew8sTV3VhDPPWEGO9S/Pv92Rt/v8t8YD+p7bw9inn0l9DjPDmbD5K2Oqb0dnod9evR3NXvZcGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtnwEVtQcr5fCNI0AAAAASUVORK5CYII=">
<!-- need to encode image because of CORS -->
<button id="save">save cropped - 50, 20, 100, 80</button>

Unfortunately, Edge doesn't support HTMLCanvasElement.toBlob() (I use Edge) :(. You can use polyfill from MDN. If my code doesn't work, please leave comment. toBlob should work in IE 10 with prefix. Minimum Chrome is 50