js截取图片上传(仅原理)----闲的无聊了代码就不共享了!写的难看,不好意思给你们看了(囧)
就算世界再坑爹,总有一些属性能带你走出绝望(伟大的absolute)
今天吐槽一下!......在我的世界里没有正统UI,所以效果图永远都是那么坑爹!
这里我要感谢有个position:absolute; T_T
当遇到各种不合理布局的时候,至少还有它
吐槽完毕!!!
这个就是一个简单的图片截取工具!!简陋了点我承认
首先第一步,没什么大问题,解析图片格式
图片么无非就是png,jpg,gif多余的统统alert框叫他们换
第二步么也没什么奇怪难度,就无非设置鼠标形状
第三步么还是没什么难度获取鼠标按下去的位置event.clientX,event.clientY,松开的位置event.clientX,event.clientY
第四步还是没啥难度!
无非就是用绝对定位顶4块位置
加个灰色透明
第六步还是没难度,一共就那么6个点鼠标按下去触发函数,然后松开记住位置调整图像
第7部边上的那个缩略图,无非就是调整图片大小和位置(margin什么的都可以)反正最外面包着一个头像的width和高度,多余的over-flow:hidden就好了
第8部上传图片,ajax返回处理好的图片
额,写上这一段的时候主要还是不明白,好多点反对是对我的随笔不满还是对我随笔质量的不满。。实际上我更多的把这个博客当成个人动态玩的。。。所以还是比较随意的。。。当然如果觉得写得有问题可以在下方评论写出改进建议。。。我会虚心接受,顺便可以知道自己的不足点。。。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架