就算世界再坑爹，总有一些属性能带你走出绝望（伟大的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返回处理好的图片

js截取图片上传（仅原理）----闲的无聊了代码就不共享了！写的难看，不好意思给你们看了（囧）的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. PHP+js实现图片上传，编辑

    文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...

  3. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  4. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  5. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  6. js判断图片上传时的文件大小，和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  7. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  9. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

随机推荐

  1. leetcode刷题笔记258 各位相加

    题目描述: 给一个非负整数 num,反复添加所有的数字,直到结果只有一个数字. 例如: 设定 num = 38,过程就像: 3 + 8 = 11, 1 + 1 = 2. 由于 2 只有1个数字,所以返 ...

  2. spring boot 2.0 源码分析（五）

    在上一篇文章中我们详细分析了spring boot是如何准备上下文环境的,今天我们来看一下run函数剩余的内容.还是先把run函数贴出来: /** * Run the Spring applicati ...

  3. SimpleDateFormat的一些常用用法

    /** SimpleDateFormat函数语法: G 年代标志符 y 年 M 月 d 日 h 时 在上午或下午 (1~12) H 时 在一天中 (0~23) m 分 s 秒 S 毫秒 E 星期 D ...

  4. Daily Scrum NO.4

    工作概况 符美潇(PM) 昨日完成的工作 1.Daily Scrum.日常会议及日常工作的分配和查收. 2.解决并录入了一个严重的过滤器BUG,该BUG会导致获取子链接的严重异常. 3.在TFS上进行 ...

  5. bing背单词交互流程 - Chongyang Bai

    昨天和travis,钟秋开会确认了bing背单词的手机界面交互流程.我在这里简单描述一下,设计页面暂时不能贴出来,期待大家的宝贵意见 b(￣▽￣)d. 单词本浏览界面:单词本被分为两类,用户单词本和单 ...

  6. 累计进度条 PSP

    每周例行报告 本周PSP 类别 任务 开始时间 结束时间 被打断时间 总计工作时间    11月16日 代码 参与团队项目 10:05 12:12 15 112min 写博客 进度统计 21:52 2 ...

  7. Python3《机器学习实战》学习笔记（一）：k-近邻算法(史诗级干货长文)

    https://blog.csdn.net/c406495762/article/details/75172850

  8. C# 登录窗口的设计技巧

    记得很久之前要用C#做个需要登录的小东西,自己之前完全没有编写WinForm的经验,整个过程中,自己感觉应该怎么写就怎么写,时常导致许多逻辑性的错误,比如在做这个登录窗口的时候,应该实现的效果是,用户 ...

  9. maven基础知识汇总

    maven的dependency中scope=compile和provided的区别 对于scope=compile的情况(默认scope),也就是说这个项目在编译,测试,运行阶段都需要这个artif ...

  10. nginx提示Job for nginx.service failed because the control的问题

    启动nginx时就报错!Job for nginx.service failed because the control process exited with error code. See &qu ...