Cropping images in the browser BEFORE the upload [closed]

Asked
Active3 hr before
Viewed126 times

6 Answers

uploadimagesbrowser
90%

draw the image into a canvas with the crop boundaries specified,get the image data from the canvas and make it a href attribute for an anchor tag in the dom ,All you have to do then is post the image data to this file and it will save the image to disc and return you the existing image filename. ,And here's a sample php code for saving the image data (base64) into an actual image :

Update
Here's the live demo as I promised. It takes the jsfiddle logo and crops 5px of each margin.
The code looks like this :

var img = new Image();
img.onload = function(){
    var cropMarginWidth = 5,
        canvas = $('<canvas/>')
                    .attr({
                         width: img.width - 2 * cropMarginWidth,
                         height: img.height - 2 * cropMarginWidth
                     })
                    .hide()
                    .appendTo('body'),
        ctx = canvas.get(0).getContext('2d'),
        a = $('<a download="cropped-image" title="click to download the image" />'),
        cropCoords = {
            topLeft : {
                x : cropMarginWidth,
                y : cropMarginWidth 
            },
            bottomRight :{
                x : img.width - cropMarginWidth,
                y : img.height - cropMarginWidth
            }
        };

    ctx.drawImage(img, cropCoords.topLeft.x, cropCoords.topLeft.y, cropCoords.bottomRight.x, cropCoords.bottomRight.y, 0, 0, img.width, img.height);
    var base64ImageData = canvas.get(0).toDataURL();


    a
        .attr('href', base64ImageData)
        .text('cropped image')
        .appendTo('body');

    a
        .clone()
        .attr('href', img.src)
        .text('original image')
        .attr('download','original-image')
        .appendTo('body');

    canvas.remove();
}
img.src = 'some-image-src';

file proxy.php :

$imgData = getimagesize($_GET['img']);
header("Content-type: ".$imgData['mime']);
echo file_get_contents($_GET['img']);

This way, instead of loading the external image direct from it's origin :

img.src = 'http://some-domain.com/imagefile.png';

You can load it through your proxy :

img.src = 'proxy.php?img=' + encodeURIComponent('http://some-domain.com/imagefile.png');

file save-image.php :

$data = preg_replace('/data:image\/(png|jpg|jpeg|gif|bmp);base64/', '', $_POST['data']);
$data = base64_decode($data);
$img = imagecreatefromstring($data);

$path = 'path-to-saved-images/';
// generate random name
$name = substr(md5(time()), 10);
$ext = 'png';
$imageName = $path.$name.
'.'.$ext;

// write the image to disk
imagepng($img, $imageName);
imagedestroy($img);
// return the image path
echo $imageName;
load more v
88%

Import the necessary Stylesheet and JavaScript into the page.,Create a container to place your image to be cropped.,Create a canvas element that will display the cropped image., Annotating An Image In JavaScript – Annotorious

Import the necessary Stylesheet and JavaScript into the page.

<link rel="stylesheet" href="js-crop.css" />
<script src="js-crop.js"></script>
load more v
72%

There are many benefits of Cropping of image before upload image to server. ,Crop image will reduce image size and optimize image before uploading to the server.,Crop image will resize image as per required size while uploading on the server.,Crop image will optimize image data before uploaded to the server.

0
65%

In this 3 minute tutorial we’ll write a tiny JavaScript function that helps us crop images to various aspect ratios. Super useful for cropping photos before posting to social media timelines or uploading profile pictures as these are often required to be of a certain aspect ratio.,By using the HTML canvas API and some basic math we build a tiny crop helper function that makes it easy to quickly crop images in various aspect ratios. This helps us prepare images for social media posts, profile pictures, familiar document sizes, or other popular media formats.,As a final step let’s turn our code into a reusable function so we can quickly crop images with various crop aspect ratios. Our JavaScript snippet is already suitable to be used for any aspect ratio, not just squares.,If you need a solution for these issues you could explore Pintura Image Editor, an easy to use image editor that solves these edge cases and features a wide range of additional functionality.

To get started we’ll need a source image. Let’s use a generic image URL as our source.

const imageURL = "path/to/our/image.jpeg";
load more v
75%

Generate QR Code in Angular Using angularx-qrcode July 24, 2021 No Comments , Generate QR Code in Angular Using angularx-qrcode July 24, 2021 No Comments ,In this article, we’ll learn how to upload images, preview images,s and crop images in Angular. For that, we used the “ngx-image-cropper” module. Let’s create a new project to implement upload crop and scale images in angular for that you need to run the following command to create a project., Output Below is the full embeded code for image upload preview and crop images in angular. you can easily used in your application. Example

In this article, we’ll learn how to upload images, preview images,s and crop images in Angular. For that, we used the “ngx-image-cropper” module. Let’s create a new project to implement upload crop and scale images in angular for that you need to run the following command to create a project.

ng new image - cropper
load more v
40%

FineCrop is an easy image cropping jQuery plugin which provides a convenient interface to zoom/move/crop local images before uploading. Heavily based on HTML5 canvas API.,This awesome jQuery plugin is developed by devsubhajit. For more Advanced Usages, please check the demo page or visit the official website.,Zoom/Rotate/Crop/Preview Images Before Uploading - ImgUploader,Free jQuery Plugins and Tutorials - One of the BEST jQuery websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins. More...

1. Import the FineCrop plugin and other required resources into the webpage.

<link href="css/fineCrop.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="js/fineCrop.js"></script>
load more v

Other "upload-images" queries related to "Cropping images in the browser BEFORE the upload [closed]"