使用 JavaScript 裁剪图像

2022-01-17 00:00:00 javascript html css html5-canvas angular

在我的 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/

      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

而使用画布后是这样的: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

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

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

请帮助我实现结果无需 jQuery 或任何库...

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

推荐答案

这是一个在您上传时使用选择文件按钮获取图像的函数

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

HTML 将是

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

这是一个工作小提琴

如果您添加文件，预览图像将被更新.您实际上在这里获得了一个数据 url.使用数据 url 将图像加载到画布然后裁剪它.调用 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 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;
}

查看工作小提琴:这里

相关文章