使用JavaScript裁剪图像 [英] Crop the image using JavaScript

问题描述

在我的Angular 6应用程序中，我正在制作文件上传选项，在预览中，上传的文件需要显示自动裁剪和自动调整大小。

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.

我试过了以下，

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/

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

在使用画布之前，原始图像如下所示： https://mdn.mozillademos.org/files/5397/rhino.jpg

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

使用canvas后，它就像这样： https://jsfiddle.net/8jwq3cs7/

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...

工作示例： https://stackblitz.com/edit/angular-file-upload-preview-uwpf8f

即使是单独使用纯JavaScript的解决方案，如果不是采用Angular方式也会很明显......

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

要求是，如果我选择一个文件然后需要裁剪相同的文件并且适合t他在预览中自动调整大小......

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

请帮助我实现没有jQuery或任何库 ...

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

推荐答案

这是一个使用选择文件按钮

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

这是工作小提琴

如果添加文件，预览图像将会更新。
你实际上在这里获得了一个数据网址。使用数据网址将负载图像添加到画布然后裁剪它。调用 drawimg（e.target.result）

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 image to canvas then crop it. calling 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;
}

查看工作小提琴：这里

这篇关于使用JavaScript裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！