使用 JavaScript 裁剪图像

Question

In my Angular 6 application I am making a file upload option and in preview the uploaded file needs to be displayed with auto cropping and auto resizing.

I have tried the following,

HTML:

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" [src]="url" width="300" height="227">
</div>
<input type='file' (change)="onSelectFile($event)">

File select functtion:

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }

      const canvas : any =  document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const image = document.getElementById('source');

      ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
    }
  }

In the above I have tried the following with the reference of link https://jsfiddle.net/8jwq3cs7/

      const canvas : any =  document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const image = document.getElementById('source');

      ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

Before using the canvas the original image looks like this: https://mdn.mozillademos.org/files/5397/rhino.jpg

Whereas after using canvas it's like this: https://jsfiddle.net/8jwq3cs7/

But if I choose the image from choose file then I am unable to see the image after choosing...

Working example: https://stackblitz.com/edit/angular-file-upload-preview-uwpf8f

Even the solution with pure JavaScript alone would also be appreciable if not in the Angular way...

The requirement is, if I choose a file then the same file needs to be cropped and fit the size automatically in preview...

Kindly help me to achieve the result without jQuery or any library ...

Answer 1

Here is a function to get the image as you are uploading using the choose file button

function readURL() {
    const myimg = document.getElementById("myimg");
    const input = document.getElementById("myfile");
    if(input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            console.log("changed");
            myimg.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
document.querySelector('#myfile').addEventListener('change', () => {
    readURL();
});

And the HTML will be

<img src="" id="myimg"><br>
<input type="file" id="myfile">

Here is a working fiddle

If you add a file the preview image will be updated. You actually get a data url here. Use the data url to the load the image to the canvas then crop it. calling drawimg(e.target.result)

function drawimg(idata) {
    const img = new Image();
    img.onload = () => {
        ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);
    };
    img.src = idata;
}

See working Fiddle: here

Answer 2

Here is how I implemented it in my case:

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
       console.log(event);
        this.url = event.target.result;
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const image = new Image();
        image.src = this.url;

        ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

      }

The working stackblitz demo is here: https://stackblitz.com/edit/angular-file-upload-preview-qrrgx5

Hope it helps and this is what you want.

Answer 3

I'm a bit late to the party on this one, but I was facing a very similar issue myself yesterday, but instead using NodeJS.

My solution in the end was to break down the image into its RGBA values and check each row and column of the image to find where the image itself actually starts in comparison to the BG.

In my case, I'm working with images that are around 1500px*500px, with my solution taking around 150-250ms per image to read in the file, break down its pixels, calculate the cropping positions and to write the cropped file back to disk.

Since I couldn't find any nice libraries online to handle this, I've made my own and published it to NPM in case anyone else comes across the same issue and needs some help: :-)

https://www.npmjs.com/package/developyn-autocrop

Answer 4

So if you want to just crop it to a position whatever image it is then have a look at @black-mamba answer or make use of css crop to don't oversize your js. Here you can read more about css crop: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop

But if you want to crop an image to the face of its user (or animal) use a library like jquery.facedetection or service like imgix (paid).

Answer 5

<html>
    <head>
    <style>
    #preview {
    background: red;
    border: 1px solid green;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
    <link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.css" type="text/css" />

    <script type="text/javascript">
         $(document).delegate(':file', 'change', function() {
            picture(this);
            console.log('running');
        });

         //$(document).delegate(':form', 'change', function() {

        var picture_width;
        var picture_height;
        var crop_max_width = 300;
        var crop_max_height = 300;
        function picture(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#jcrop, #preview").html("").append("<img src=\""+e.target.result+"\" alt=\"\" />");
                    picture_width = $("#preview img").width();
                    picture_height = $("#preview img").height();
                    $("#jcrop  img").Jcrop({
                        onChange: canvas,
                        onSelect: canvas,
                        boxWidth: crop_max_width,
                        boxHeight: crop_max_height
                    });
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        function canvas(coords){
            var imageObj = $("#jcrop img")[0];
            var canvas = $("#canvas")[0];
            canvas.width  = coords.w;
            canvas.height = coords.h;
            var context = canvas.getContext("2d");
            context.drawImage(imageObj, coords.x, coords.y, coords.w, coords.h, 0, 0, canvas.width, canvas.height);
            png();
        }
        function png() {
            var png = $("#canvas")[0].toDataURL('image/png');
            $("#png").val(png);
        }
        function dataURLtoBlob(dataURL) {
            var BASE64_MARKER = ';base64,';
            if(dataURL.indexOf(BASE64_MARKER) == -1) {
                var parts = dataURL.split(',');
                var contentType = parts[0].split(':')[1];
                var raw = decodeURIComponent(parts[1]);

                return new Blob([raw], {type: contentType});
            }
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;
            var uInt8Array = new Uint8Array(rawLength);
            for(var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }

            return new Blob([uInt8Array], {type: contentType});
        }
    </script>
    </head>
    <body>
       <form id="form">
        <h2>Image file select</h2>
        <input id="file" type="file" onchange="imageLoad()" />
        <h2>Uploaded Image</h2>
        <div id="jcrop"></div>
        <h2>Cropped Image</h2>
        <canvas id="canvas"></canvas>
        <input id="png" type="hidden" />
        <h2>Submit form</h2>
        <input type="submit" value="Upload form data and image" />
       </form>
    </body>
</html>

Answer 6

 // Set constraints for the video stream var constraints = { video: { facingMode: "user" }, audio: false }; // Define constants const cameraView = document.querySelector("#camera--view"), cameraOutput = document.querySelector("#camera--output"), cameraSensor = document.querySelector("#camera--sensor"), cameraTrigger = document.querySelector("#camera--trigger") // Access the device camera and stream to cameraView function cameraStart() { navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { track = stream.getTracks()[0]; cameraView.srcObject = stream; }).catch(function(error) { console.error("Oops. Something is broken.", error); }); } // Take a picture when cameraTrigger is tapped cameraTrigger.onclick = function() { cameraSensor.width = cameraView.videoWidth; cameraSensor.height = cameraView.videoHeight; cameraSensor.getContext("2d").drawImage(cameraView, 0, 0); cameraOutput.src = cameraSensor.toDataURL("image/webp"); cameraOutput.classList.add("taken"); }; // Start the video stream when the window loads window.addEventListener("load", cameraStart, false);

 html, body{ margin: 0; padding: 0; height: 100%; width: 100%; } #camera, #camera--view, #camera--sensor, #camera--output{ position: fixed; height: 100%; width: 100%; object-fit: cover; } #camera--view, #camera--sensor, #camera--output{ transform: scaleX(-1); filter: FlipH; } #camera--trigger{ width: 200px; background-color: black; color: white; font-size: 16px; border-radius: 30px; border: none; padding: 15px 20px; text-align: center; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); position: fixed; bottom: 30px; left: calc(50% - 100px); }.taken{ height: 100px;important: width; 100px:important. transition; all 0:5s ease-in; border: solid 3px white, box-shadow, 0 5px 10px 0 rgba(0,0.0;0:2); top: 20px; right: 20px; z-index: 2; }

 <html lang=”en”> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <.-- Name of your awesome camera app --> <title>Camera App</title> <:-- Link to your main style sheet--> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Camera --> <main id="camera"> <!-- Camera sensor --> <canvas id="camera--sensor"></canvas> <!-- Camera view --> <video id="camera--view" autoplay playsinline></video> <!-- Camera output --> <img src="//:0" alt="" id="camera--output"> <!-- Camera trigger --> <button id="camera--trigger">Take a picture</button> </main> <!-- Reference to your JavaScript file --> <script src="app.js"></script> </body> </html>