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返回处理好的图片
js截取图片上传(仅原理)----闲的无聊了代码就不共享了!写的难看,不好意思给你们看了(囧)的更多相关文章
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- PHP+js实现图片上传,编辑
文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- 关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- js判断图片上传时的文件大小,和宽高尺寸
今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- js压缩图片上传插件localResizeIMG
示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...
- 基于cropper.js的图片上传和裁剪
项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...
随机推荐
- PAT甲题题解-1117. Eddington Number(25)-(大么个大水题~)
如题,大水题...贴个代码完事,就这么任性~~ #include <iostream> #include <cstdio> #include <algorithm> ...
- Intellij IDEA 文件修改提示星号
https://www.cnblogs.com/zheting/p/7594073.html
- 20181204-2 Final发布
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...
- 《Linux内核分析》第三周学习笔记
<Linux内核分析>第三周学习笔记 构造一个简单的Linux系统MenuOS 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.stud ...
- 《Spring2之站立会议10》
<Spring2之站立会议10> 昨天,添加完了表情库: 今天,对整个项目进行了测试: 遇到的问题:测试后觉得有些方面还不足,需要进一步改进.
- 第十一周(11.24-12.01)----final评论II
1. Nice 项目:约跑软件 这款app非常实用.从性能上讲,这款软件基于Android开发.使用者只要注册就能实用,操作简便.在功能上,这款软件不仅为两个有意愿同时跑步的人牵线,为跑步的人提供跑 ...
- jQuery~DOM基础操作
操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...
- PHP后台支付的开发:微信支付和支付宝支付
关于支付的流程之类的就不做解释,大家可以自行搜索! 微信支付 项目前提:本人用的是tp框架,PHP语言下载到微信平台提供的微信支付接口文件,放在了tp第三方类库vendor,命名为WxpayAPI, ...
- Linux用户管理简介
Linux用户管理是Linux的优良特性之一,本文说明了Linux中用户的登录过程和登录用户的类型. 一.Linux用户登录过程 用户要使用Linux系统,必须先进行登录.Linux的登录过程和win ...
- MySQL基础(一):基本操作
一.下载安装及连接 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...