Обрезать изображение с помощью JavaScript - PullRequest
Новая
       9

Обрезать изображение с помощью JavaScript

0 голосов
/ 17 декабря 2018

В моем приложении Angular 6 я делаю опцию загрузки файла, и в предварительном просмотре загруженный файл должен отображаться с автоматическим обрезанием и автоматическим изменением размера.

Я пробовал следующее,

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)">

Функция выбора файла: 

  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);
    }
  }

Выше я пробовал следующее со ссылкой 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);

Перед использованием холста исходное изображение выглядит следующим образом: https://mdn.mozillademos.org/files/5397/rhino.jpg

Тогда как после использования холста это выглядит так: https://jsfiddle.net/8jwq3cs7/

Но еслиЯ выбираю изображение из choose file, тогда я не могу увидеть изображение после выбора ...

Рабочий пример: https://stackblitz.com/edit/angular-file-upload-preview-uwpf8f

Даже решение с использованием только чистого JavaScript также было бы замечательно, если бы не Angular ...

Требование: , если я выбираю файл, то тот же файл должен быть обрезани подгонять размер автоматически в предпросмотре ...

Пожалуйста, помогите мне достичь результата без jQuery или какой-либо библиотеки ...

Ответы [ 5 ]

0 голосов
/ 17 июля 2019 

// 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>
0 голосов
/ 17 июля 2019 
<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>
0 голосов
/ 17 декабря 2018

Вот как я реализовал это в моем случае: 

  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);

      }

Рабочая демонстрация стекаблица находится здесь: https://stackblitz.com/edit/angular-file-upload-preview-qrrgx5

Надеюсь, это поможет, и это то, что вы хотите.

0 голосов
/ 17 декабря 2018

Так что, если вы хотите просто обрезать его до положения, каким бы оно ни было, взгляните на ответ @ black-mamba или воспользуйтесь CSS-кадрированием, чтобы не увеличить размер js.Здесь вы можете прочитать больше о css crop: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop

Но если вы хотите обрезать изображение на лице его пользователя (или животного), используйте библиотеку, такую ​​как jquery.facedetection илиуслуга типа imgix (платная).

0 голосов
/ 17 декабря 2018

Вот функция для получения изображения при загрузке с использованием выберите файл кнопка 

function readURL() {
                    var myimg = document.getElementById("myimg");
          var input = document.getElementById("myfile");
          if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            console.log("changed");
              myimg.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
          }
}

document.querySelector('#myfile').addEventListener('change',function(){
    readURL()
});

И HTML будет 

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

Здесь рабочая скрипка

Если вы добавите файл, изображение для предварительного просмотра будет обновлено.Вы на самом деле получаете URL-адрес данных здесь.Используйте URL-адрес данных для загрузки изображения на холст, а затем обрежьте его.Вызов drawimg(e.target.result)

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

См. рабочий Fiddle: здесь

...