Crop the image using JavaScript(使用 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/一个>
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;
}
查看工作小提琴:这里
这篇关于使用 JavaScript 裁剪图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用 JavaScript 裁剪图像
基础教程推荐
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01