Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >纯JavaScript 非flash 上传头像/图片截取截图

纯JavaScript 非flash 上传头像/图片截取截图

用户1258909

发布于 2018-07-03 04:20:33

发布于 2018-07-03 04:20:33

8620

举报

文章被收录于专栏：拂晓风起拂晓风起

介绍一个jquery的插件：jcrop

http://deepliquid.com/content/Jcrop.html。源代码在此：CSDN~~

利用这个插件基本可以做出上传图片，然后截图的功能了。

基本思路是：

1、上传图片。（最好用非刷新的方式，例如隐藏iframe）

2、显示图片，加入jcrop操作

3、上传截图的信息，坐标点，宽高

4、后台根据信息截取图片，实际上生成一个新图

由于我的代码用CI的，所以不好整理出来~~只上个粗糙的图吧：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2011-10-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

前端开发日常工作每日记录笔记（2019至2024合集）

前端工程师腾讯技术创作特训营S12#AI进化论前端

从2019年开始，在工作之余会主动记录一些东西，像每天遇到的问题、感想和学到的新的知识点，后面搭建了博客又开始写博客，也整理和记录了很多的笔记。

人人都是码农

2025/04/04

1070

写给新手前端的各种文件上传攻略，从小图片到大文件断点续传

https 网络安全 html5 github git

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

coder_koala

2019/11/04

3.2K0

写给新手前端的各种文件上传攻略，从小图片到大文件断点续传

Asp.Net无刷新上传并裁剪头像

asp.net jquery json

开发网站几乎都做过上传图片并截图，做个无刷新Asp.Net上传并截图示例实现功能： 1.选择文件，自动上传并生成缩放图（上传带进度条），形成预览图 2.在预览区，实现鼠标拖拽截图区，截取图片（示例截图区按缩放图小边为截图正方形长度，可扩展为截图区可变形式） 3.点击保存，截取小图，保存截取图并显示在页面上，并删除原缩略图示例截图： image.png image.png -----------------------------------------------------------------

Porschev

2018/01/16

3.7K0

Asp.Net无刷新上传并裁剪头像

JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

摘要本人个人nodejs分享论坛：tnodejs.com 参考：http://blog.csdn.net/nhconch/article/details/7295456 需要解决的问题有：本地图片如何在上传前预览、编辑；最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口）

蛋未明

2018/06/07

1.9K0

如何用 JavaScript 制作一个好用又好玩的图片压缩工具

javascript 微信上传图片压缩原理

现在的设备发达了，图片拍下来动辄 5MB 10MB，单反相机歘欻欻一张经能达到 40MB，手机的内部储存也跟着很大，随便一个手机都 100G 。

独元殇

2023/03/21

9770

如何用 JavaScript 制作一个好用又好玩的图片压缩工具

vue+vue-cropper实现上传剪裁图片以及上传时压缩图片

代码暂时都是从项目中抽出来的，只适合借鉴参考，等有时间再单独将这些功能单独写项目，欢迎大家提供更好用的方法或指出不足之处，一起进步。

conanma

2021/11/03

3.7K0

基于业务场景下的图片/文件上传方案总结

图片/文件上传组是企业项目开发中必不可少的环节之一, 但凡涉及到用户模块的都会有图片/文件上传需求, 在很多第三方组件库(ant desigin, element ui)中它也是基础组件之一. 接下来笔者就来带大家从零实现一款图片/文件上传组件以及扩展出更强大的上传组件.

徐小夕

2020/10/10

1.7K0

基于业务场景下的图片/文件上传方案总结

174道 JavaScript 面试题，助你查漏补缺

网站 json ajax 编程算法 javascript

最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题，本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 JavaScript 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！

wscats

2022/05/05

5190

50个好用的前端框架，建议收藏!

react github git 开源

来源 | https://www.jianshu.com/p/182b69e54fe8

ConardLi

2019/10/21

2.4K0

174道JavaScript 面试知识点总结（下）

json vue.js javascript 编程算法 node.js

详细资料可以参考：《前端安全系列之二：如何防止 CSRF 攻击？》《[ HTTP 趣谈] origin, referer 和 host 区别》

前端达人

2021/03/16

9220

174道JavaScript 面试知识点总结（下）

终端新玩法：“零代码”的剧本式引导

编程算法图像识别 opencv

总第500篇 2022年第017篇 App引导是端上做心智建设的重要手段，我们尝试了“剧本式”思维获得了较好效果。在想法落地时，相关研发工作量较大，而且终端技术栈多样化，需要做到“零代码”和“技术栈无关”。最终我们通过“图像匹配”与“标准协议”等核心方案实现了突破。本文将介绍该项目的思考过程，并会对关键技术方案进行剖析和解读，希望能给从事相关开发工作的同学以启发。背景现状目标与挑战项目目标收益测算逻辑面临的挑战整体设计展示形式选择方案描述部分技术方案剖析基于视觉智能的区域定位方案

美团技术团队

2022/04/08

6530

终端新玩法：“零代码”的剧本式引导

SSM 项目 ——— 小米商城后台管理系统

xml spring ajax java 数据库

本项目主要目的是使学员更深层的了解IT企业的文化和岗位需求、模拟企业的工作场景，分享研制成果，增加学员对今后工作岗位及计算机应用开发对客观世界影响的感性认识，使学员对技术有更深入的理解，在今后工作中能有更明确的目标和方向。并能为日后职业规划提供很好的指导作用。

全栈程序员站长

2022/09/14

3.6K0

SSM 项目 ——— 小米商城后台管理系统

100道+ JavaScript 面试题，助你查漏补缺

网站 json ajax 编程算法 javascript

详细资料可以参考：《JavaScript 有几种类型的值？》《JavaScript 有几种类型的值？能否画一下它们的内存图；》

前端达人

2020/04/08

9080

可能是最全的使用 HEXO 搭建个人博客教程

https 网络安全腾讯云开发者社区 github git

作为一个开发者不能没有博客，最近花了几天的时间搭建了这个博客，处理了很多细节，在这篇文章中我会把我从开始到现在以及后续的优化整理出来，帮助更多的人搭建、维护、更新、自己的博客。

molier

2022/11/03

2.6K0

可能是最全的使用 HEXO 搭建个人博客教程

高薪面试题之四.前端

class 浏览器前端数据网站

这段事件一直在整理有关前端的面试题目，整理这也题目，不只是为了能够学习应付即将到来的面试，更是为了补补基础知识。日常项目开发进度太快了，很多属性或者方法用了就忘，这样会造成另外一个隐患，因为基本知识不够扎实，常用的方法用得不够熟练，就很难高效率地开发项目。

张哥编程

2024/12/17

960

Android OCR文字识别实时扫描手机号（极速扫描单行文本方案）

编程算法 https 网络安全文字识别

AI时代已经到了，各位小伙伴如果还有类似的需求，现在已经有很成熟的免费OCR库了，不用再挖古董文章了，钻研精神要保持，但也不用处处自己造轮子了哦

全栈程序员站长

2022/06/29

9.5K0

Android OCR文字识别实时扫描手机号（极速扫描单行文本方案）

JavaScript专家开课啦。

java html python

Hi好久不见的大家，雷小达想死你们了！今天带来三个JavaScript的内容，让大家一把过足瘾。在西安办公室有一个JavaScript方面的专家，最近他的努力方向转移到了Lisp上。且听，JavaScript专家——邱俊涛一一道来。 I code it Code and Life RSS 文章文章归档出版物关于团队里的两类程序员 JAN 14TH, 2018 程序员的分类最近几年，我在多个不同类型的项目上，以不同的角色工作过：有时候会为项目前期做一些预研、然后为后续的交付估算工作量；有时

ThoughtWorks

2018/04/18

1.8K0

JavaScript专家开课啦。

前端学习资料整理

css json react python javascript

HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox

江一铭

2022/06/16

3.5K0

前端开发日常工作每日记录笔记（2019至2024合集）

小程序笔记工作浏览器数据

从2019年开始，在工作之余会主动记录一些东西，像每天遇到的问题、感想和学到的新的知识点，后面搭建了博客又开始写博客，也整理和记录了很多的笔记。

人人都是码农

2025/04/06

2430

前端开发日常工作每日记录笔记（2019至2024合集）

JAVA编程学习经验实践积累总结分享

1. 大量群发邮件：购买Edm服务，大的互联网企业是和邮箱服务商签订协议（百度，腾讯，京东，阿里，csdn）

coderlwz

2023/05/07

8050

相关推荐

前端开发日常工作每日记录笔记（2019至2024合集）

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

Flash本地传递大数据，图片数据，localconnection 超出大小，超出限制 bitmapdata

加入讨论

的问答专区 >

相关课程

一站式学习中心 >

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

💥开发者 MCP广场重磅上线！

精选全网热门MCP server，让你的AI更好用 🚀