<!DOCTYPE html>
<html>
<head>
<title>Image Cropping</title>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<canvas id="canvas"></canvas>
<script>
// 获取input框
const fileInput = document.getElementById('fileInput');
// 初始化canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 监听input框里面的变化
fileInput.addEventListener('change', (event) => {
// 获取文件
const file = event.target.files[0];
// 读取文件[对象]
const reader = new FileReader();
// 读取完成后执行回调
reader.onload = function (event) {
// 创建一个Image[对象]
const img = new Image();
// 监听加载完成后执行回调函数
img.onload = function () {
const x = 100; // 切割区域的起始横坐标
const y = 100; // 切割区域的起始纵坐标
const width = 200; // 切割区域的宽度
const height = 200; // 切割区域的高度
// 设置Canvas的宽度和高度为图片的宽度和高度
canvas.width = img.width;
canvas.height = img.height;
// 通过drawImage方法，在Canvas上绘制完整的图片
ctx.drawImage(img, 0, 0);
// 通过getImageData方法执行切割操作，返回一个裁剪的ImageData对象
const croppedImageData = ctx.getImageData(x, y, width, height);
canvas.width = width;
canvas.height = height;
// 通过putImageData方法，将切割后的ImageData渲染到Canvas上
ctx.putImageData(croppedImageData, 0, 0);
};
img.src = event.target.result;
// console.log('-base64:-->>>',img.src);
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>canvas图片裁剪demo
猜你喜欢
转载自blog.csdn.net/m0_66675766/article/details/132082604
今日推荐
周排行