当前位置：首页 > news >正文

前端开发攻略---图片裁剪上传的原理

news 来源：原创 2024/9/20 19:45:29

编辑

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 = 200cvs.height = 200const 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 = 200cvs.height = 200const 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>