工作中我们常用到图片的裁剪功能，有时候需要裁剪为1寸照片，2寸照片等大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
// 创建一个canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置canvas的尺寸为一寸照片的尺寸（2.54cm x 3.81cm）
canvas.width = 295; // 1英寸等于295像素
canvas.height = 413; // 1英寸等于413像素
// 加载图片
var image = new Image();
image.src = './images/6666.png';
// 等待图片加载完成后进行裁剪
image.onload = function () {
// 将图片绘制到canvas上，并进行裁剪
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// 获取裁剪后的图片数据
var croppedImageDataURL = canvas.toDataURL('image/jpeg');
// 处理裁剪后的图片数据，比如上传到服务器或者显示在页面上
console.log(croppedImageDataURL);
// 直接复制croppedImageDataURL到浏览器地址上就可以看到效果
// 可直接封装成方法，直接传参数即可
};
</script>1.裁剪前
2.裁剪后
3.方法仅供参考，图片好像有点变形
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
