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

news2024/11/23 18:30:32

目录

​编辑

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、上传裁剪区域

思路:

  1. 通过交互后的结果,获取到裁剪的宽度、高度、位置
  2. 根据这些参数通过canvas画出来
  3. 将canvas转换blob,再讲blob转换为file
  4. 将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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2039796.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试必备:高频算法与面试题全面解析

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…

c++割圆法求圆周率

前言 上期的Python(加了turtle 所以带图片)割圆法点赞数量感人 但洛谷那期已经让我飞了 于是我准备掉点头发 以五升六之躯硬刚初三 这期请教了大量的高年级同学 把这个要用到九年级知识点的割圆法搞出来了 不要怕难 像我这样的xxs也能看懂 先声明 割圆法不一定要用循环 …

Open3D PCA法中特征值和特征向量中的关系及应用(原理详细版)

目录 一、概述 1.1定义 1.2特征值与特征向量的关系 1.3特征值和特征向量大小的关系 1.4在PCA法中的应用及实现步骤 二、特征值大小排序的意义 2.1排序的原因 2.2特征值大小及意义 2.3在PCA中的应用 2.4代码示例 三、特征值计算法向量 3.1评判标准 3.2原理 3…

虚拟人实时主持创意互动方案:赋能峰会论坛会议等活动科技互动感

随着增强现实、虚拟现实等技术的不断发展&#xff0c;“虚拟人实时主持”创意互动模式逐渐代替传统单一真人主持模式&#xff0c;虚拟主持人可以随时随地出现在不同活动现场&#xff0c;也可以同一时间在不同分会场中担任主持工作&#xff0c;在峰会、论坛、会议、晚会、发布会…

与LLMs进行在IDE中直接、无需提示的交互是工具构建者探索的一个有希望的未来方向

这个观点在卡内基梅隆大学与谷歌研究人员合作文章 《Using an LLM to Help With Code Understanding》 中提出。 论文地址&#xff1a;https://dl.acm.org/doi/abs/10.1145/3597503.3639187 摘要 理解代码非常具有挑战性&#xff0c;尤其是在新且复杂的开发环境中。代码注…

教程中对DTC(Data Transfer Object)的叙述有可改进之处

图 不 好&#xff0c;看 不 懂&#xff1b; 找 原 文&#xff0c;弄 清 楚。 翻 译 错&#xff0c;图 也 错&#xff1b; 改 几 字&#xff0c;加 一 图。 新 教 程&#xff0c;新 学 习&#xff1b; 新 体 验&#xff0c;从 未 有。

苹果(ios)私钥证书和profile文件申请教程

苹果&#xff08;ios&#xff09;私钥证书&#xff0c;可以理解为p12后缀的苹果证书&#xff0c;我们在苹果开发者中心可以生成cer格式的证书&#xff0c;然后使用mac电脑或者第三方转换成p12后缀格式的私钥证书。 证书profile文件&#xff0c;又叫描述文件&#xff0c;这个文…

无人机的电压和放电速率,你知道吗?

一、无人机电压 无人机电瓶多采用锂电池&#xff0c;其电压范围在3.7伏至44.4伏之间&#xff0c;具体取决于电池的单体电压和串联的电池节数。 单体电压&#xff1a;锂电池的单体电压通常为3.7V&#xff0c;但在满电状态下可能达到4.2V。 串联电池节数&#xff1a;无人机电瓶…

xxl-job定时任务同步点赞数据 + 内网穿透

1.xxl-job基本介绍 1.官方文档 https://www.xuxueli.com/xxl-job/ 2.gitee https://gitee.com/xuxueli0323/xxl-job 2.本地集成xxl-job 1.下载源码包 https://gitee.com/xuxueli0323/xxl-job/tree/6effc8b98f0fd5b5af3a7b6a8995bdcf30de69fc/ 2.导入到项目中 1.作为模…

【待修改】使用GraphRAG+LangChain+Ollama(LLaMa 3.1)知识图谱与向量数据库集成(Neo4j)

如何使用 LLama 3.1(一个本地运行的模型)来执行GraphRAG操作,总共就50号代码。 首先,什么是GraphRAG?GraphRAG是一种通过考虑实体和文档之间的关系来执行检索增强生成的方式,关键概念是节点和关系。 ▲ 知识图谱与向量数据库集成 知识图谱与向量数据库集成是GraphRAG 架…

121 买卖股票的最佳时机

解题思路&#xff1a; \qquad 这个题如果把每一种买卖的可能都算出来的解法时间复杂度在 O ( n 2 ) O(n^2) O(n2)&#xff0c;提交后会超时&#xff0c;所以需要在此基础上进行优化&#xff0c;能否通过一次遍历找出最大利润。 \qquad 对于当前点i&#xff0c;卖出股票所能得…

子域名下部署Java项目到docker中

场景&#xff1a;子域名需要部署Java项目&#xff0c;用于分公司的项目&#xff0c;可支持自定义功能。 拷贝总公司的后台代码 新增数据库并且修改配置环境的数据库连接 启动项目没问题后进行打包 目前我的是打成 jar包 服务器上创建文件&#xff0c;并且创建 dockerfile 文…

springboot整合activity7(一)

一、Spring Boot 集成 Activiti7&#xff08;工作流&#xff09; 此章节首先完成后端的activiti整合&#xff0c;生成工作流所需数据库表&#xff0c;数据库采用mysql。 二、依赖 <dependencies><!-- 引入Activiti7 --><dependency><groupId>org.ac…

080:vue+mapbox中interpolate 的详细解释

在Mapbox GL JS中,你可以使用样式表达式来实现数据驱动的样式,其中interpolate表达式是用于创建平滑过渡的一种方式。当你需要根据某个属性的值来动态地设置样式时,比如颜色、宽度或其他样式属性,interpolate表达式就非常有用。 文章目录 示例效果配置方式示例源代码(共14…

Manim的一个用于数学动画的 Python 库中渲染代码的功能。

Code 函数是 Manim&#xff08;一个强大的数学动画库&#xff09;中的一个重要工具&#xff0c;旨在将代码片段以视觉化的方式呈现。在教育和演示场合中&#xff0c;向观众展示算法或代码逻辑时&#xff0c;清晰的视觉效果是必不可少的。通过 Code 函数&#xff0c;用户可以轻松…

KOLA: CAREFULLY BENCHMARKING WORLD KNOWLEDGE OF LARGE LANGUAGE MODELS

文章目录 题目摘要简介KOLA 基准实验评估结论和未来工作道德声明 题目 KOLA&#xff1a;仔细对大型语言模型的世界知识进行基准测试 论文地址:https://arxiv.org/abs/2306.09296 项目地址:https://github.com/ranahaani/GNews 摘要 大型语言模型 (LLM) 的卓越性能要求评估方法…

【种草官招募令】

&#x1f31f; 你是时尚达人吗&#xff1f; 对潮流服饰有着独到的见解&#xff1f; 想通过分享赢得关注&#xff0c;还能赚取丰厚报酬&#xff1f; 来加入我们的电商种草官行列吧&#xff01; &#x1f457; 我们致力于发现和培养更多热爱时尚、善于种草的你&#xff0c;将…

Imagination CPU系列研讨会|RISC-V平台的性能分析和调试

为了让开发者及工程师深入了解 Imagination 的 CPU 产品及相关解决方案&#xff0c;Imagination 将陆续推出 5 期线上研讨会&#xff0c;包含 RISC-V 平台的性能分析和调试&#xff1b;RISC-V 安全和全球平台可信执行环境&#xff08;TEE&#xff09;&#xff1b;RISC-V 软件生…

人工智能缺陷检测方案METIS(梅迪斯):汽车零部件检测

#汽车零部件#机器视觉检测&#xff0c;作为当今科技领域的热门话题&#xff0c;正日益受到世人的瞩目。随着机器视觉系统的不断开发与优化&#xff0c;那些繁重而复杂的人工检测工作&#xff0c;已经逐渐被机器视觉检测所替代。今天&#xff0c;我们就来深入探讨一下&#xff0…

作业08.13

一、TCP机械臂测试 通过w(红色臂角度增大)s&#xff08;红色臂角度减小&#xff09;d&#xff08;蓝色臂角度增大&#xff09;a&#xff08;蓝色臂角度减小&#xff09;按键控制机械臂 注意&#xff1a;关闭计算机的杀毒软件&#xff0c;电脑管家&#xff0c;防火墙 1&#x…