使用 JavaScript 裁剪图像

在我的 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/ 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://mdn.mozillademos.org/files/5397/rhino.jpg

而使用canvas之后是这样的：https://jsfiddle.net/8jwq3cs7/ https://jsfiddle.net/8jwq3cs7/

但如果我选择图像choose file那我就是看不到照片选择后...

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

如果不是以 Angular 的方式，即使是仅使用纯 JavaScript 的解决方案也将是可观的......

要求是，如果我选择一个文件，那么需要裁剪相同的文件并在预览中自动适应尺寸...

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

这是一个在您上传时获取图像的函数选择文件 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();
});

HTML 将是

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

这里有一个工作小提琴 https://jsfiddle.net/geongeorgek/og6adnhk/8/

如果添加文件，预览图像将会更新。 你实际上在这里得到了一个数据url。使用数据 url 将图像加载到画布上，然后进行裁剪。呼叫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;
}

查看工作小提琴：here https://jsfiddle.net/geongeorgek/rp0bym1a/