目录
编辑
1、预览本地图片
2、图片裁剪交互
3、上传裁剪区域
1、预览本地图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="file" />
<img class="preview" />
</body>
<script>
const ipt = document.querySelector('input')
const img = document.querySelector('img')
ipt.onchange = function (e) {
const file = e.target.files[0] // 获取用户选择的第一个文件
const fileReader = new FileReader() // 创建一个新的 FileReader 对象,用于读取文件。
fileReader.onload = e => {
// 当文件读取完成后,e.target.result 将包含文件的 URL,赋值给 <img> 元素的 src 属性,从而显示图片
img.src = e.target.result
}
fileReader.readAsDataURL(file)
// console.log(file)
}
</script>
</html>
2、图片裁剪交互
裁剪交互比较简单,这里不在叙述。
3、上传裁剪区域
思路:
- 通过交互后的结果,获取到裁剪的宽度、高度、位置
- 根据这些参数通过canvas画出来
- 将canvas转换blob,再讲blob转换为file
- 将file对象上传到服务器
核心代码:
function uploadCutResult({ cutWidth, cutHeight, cutX, cutY }) { const cvs = document.createElement('canvas') cvs.width = 200 cvs.height = 200 const ctx = cvs.getContext('2d') ctx.drawImage(img, cutX, cutY, cutWidth, cutHeight, 0, 0, cvs.width, cvs.height) cvs.toBlob(blob => { // 拿到file对象 const file = new File([blob], 'cut-png', { type: 'image/png' }) console.log(file) }) }
全部代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="file" /> <img class="preview" /> <button>模拟交互结果</button> </body> <script> const ipt = document.querySelector('input') const img = document.querySelector('img') const btn = document.querySelector('button') ipt.onchange = function (e) { const file = e.target.files[0] const fileReader = new FileReader() fileReader.onload = e => { img.src = e.target.result } fileReader.readAsDataURL(file) // console.log(file) } function uploadCutResult({ cutWidth, cutHeight, cutX, cutY }) { const cvs = document.createElement('canvas') cvs.width = 200 cvs.height = 200 const ctx = cvs.getContext('2d') ctx.drawImage(img, cutX, cutY, cutWidth, cutHeight, 0, 0, cvs.width, cvs.height) cvs.toBlob(blob => { // 拿到file对象 const file = new File([blob], 'cut-png', { type: 'image/png' }) console.log(file) }) } // 模拟裁剪后的结果 btn.onclick = function () { uploadCutResult({ cutHeight: 100, cutWidth: 200, cutX: 10, cutY: 10 }) } </script> </html>