`
uule
  • 浏览: 6306168 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

使用megapixImage.js定位并展示上传的图片

 
阅读更多

megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

 

实现点击input 的上传按钮,选择图片后,直接定位并展示图片。

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
		<input type="file" id="cameraInput" name="cameraInput"/>

	<!--图片预览-->
	<div id="preview">
		<canvas id="myCanvas"></canvas>
		<img id="imgBtn"/>
		<div>
			<label id="tip2"></label>
		</div>
	</div>						

<script type="text/javascript"  src="zepto.min.js"></script>
<script type="text/javascript" src="mobileFix.mini.js?v=20150704"></script>
<!-- 或者引用megapixImage.js 可网上下载到-->
<script>
	var fileInput = document.getElementById('cameraInput');
	
    fileInput.onchange = function () {
        var file = fileInput.files[0];
		
        var mpImg = new MegaPixImage(file);

        //var resCanvas1 = document.getElementById('myCanvas');
		var resCanvas1 = document.getElementById('imgBtn');
        mpImg.render(resCanvas1, {
			maxWidth: 550, 
			maxHeight: 550, 
			quality: 0.8
        });
    };
</script>
</body>
</html>

 效果图:



 

 

 

 

 

 

  • 大小: 11 KB
  • 大小: 166.6 KB
分享到:
评论

相关推荐

    Canvas压缩图片所需的MegaPixImage.zip

    Canvas压缩图片所需的MegaPixImage.zip MegaPixImage,Canvas,图片上传 项目在http://blog.csdn.net/websites/article/details/50897503

    html5+exif.js+mobileBUGFix.mini.js+canvas

    实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性,用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, '...

    html5+exif.js+canvas

    实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性,用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, '...

    软2一月考勤表-20230917-075457.xlsx

    软2一月考勤表-20230917-075457.xlsx

    node-v9.10.0-win-x86.zip

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    2023年 【19页】AIGC行业专题报告:2023年有望成为AIGC的拐点.zip

    2023年 【19页】AIGC行业专题报告:2023年有望成为AIGC的拐点.zip

    node-v6.11.2-sunos-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    集团IT信息化产品项目实施方法论及IT信息化服务方案.pptx

    集团IT信息化产品项目实施方法论及IT信息化服务方案.pptx

    Delphi编程语言的深度解析

    Delphi作为一款功能强大的编程语言,以其直观易用的集成开发环境(IDE)和高效的编译器赢得了广大开发者的青睐。本文将对Delphi编程语言的特性、应用领域、编程环境、以及与其他编程语言的比较进行全面而深入的解析,并结合实际案例展示Delphi的编程实践。 Delphi是一种面向对象的编程语言,同时它也是一款可视化软件开发工具。Delphi最初由Borland公司推出,并在后续发展中被Embarcadero Technologies接手。其第一个版本发布于1995年,当时该软件还叫做Object Pascal,后来才更名为Delphi。 Delphi作为一款功能强大的编程语言,在应用程序开发领域具有广泛的应用前景。其直观易用的IDE、高效的编译器以及丰富的组件库为开发者提供了强大的支持。通过本文的解析和案例展示,我们可以看到Delphi在快速开发、跨平台性以及面向对象等方面的优势。随着技术的不断进步和需求的不断变化,相信Delphi将继续发挥其在应用程序开发领域的重要作用。

    源代码-76521生活网模板 asp版 v1.8.zip

    源代码-76521生活网模板 asp版 v1.8.zip

    瑞萨RA6M5实现ADC电压采集(FSP库驱动)

    瑞萨RA4M2驱动程序,Keil开发环境,FSP库驱动。 项目代码可直接编译运行~

    游戏购物冲值界面UI设计PSD源文件.zip

    游戏开发资源,游戏UI,游戏GUI,游戏图标,PSD格式,XD格式,PNG下载,源文件,可编辑下载,游戏购物充值界面,宝石,图标,PS格式,AI格式等,游戏APP

    2018年秋季机器学习课程大作业,2018CCF-BDCI赛题-基金相关性预测训练赛

    机器学习 机器学习是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。它专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。机器学习是人工智能的核心,是使计算机具有智能的根本途径。 机器学习的发展历程可以追溯到20世纪50年代,当时Arthur Samuel在IBM开发了第一个自我学习程序,一个西洋棋程序,这标志着机器学习的起步。随后,Frank Rosenblatt发明了第一个人工神经网络模型——感知机。在接下来的几十年里,机器学习领域取得了许多重要的进展,包括最近邻算法、决策树、随机森林、深度学习等算法和技术的发展。 机器学习有着广泛的应用场景,如自然语言处理、物体识别和智能驾驶、市场营销和个性化推荐等。通过分析大量的数据,机器学习可以帮助我们更好地理解和解决各种复杂的问题。例如,在自然语言处理领域,机器学习技术可以实现机器翻译、语音识别、文本分类和情感分析等功能;在物体识别和智能驾驶领域,机器学习可以通过训练模型来识别图像和视频中的物体,并实现智能驾驶等功能;在市场营销领域,机器学习可

    基于Qt+C++开发的横板闯关酷跑游戏+火柴人画风+源码(毕业设计&课程设计&项目开发)

    基于Qt+C++开发的横板闯关酷跑游戏+火柴人画风+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 项目简介: 一款基于Qt的横板闯关酷跑游戏,火柴人画风 #注意:下载到本地后需要将构建目录改到pro文件同级目录,否则可能无法正常显示。 游戏以控制火柴人避开障碍物,吃到尽可能多的金币为主要目标。 控制火柴人跑得越远得分越高,吃到金币会有加分并增加金币数,碰到障碍物会有扣分。 吃到红心会加速回血,吃到法杖会暂时消除所有障碍物。 不碰到障碍物人物会自动缓慢回血,血条为空时死亡,游戏结束。 操作方法: 按下W键控制火柴人向上跳跃,在空中可进行二次跳跃。 按下S键控制火柴人加速下落。 按下A键控制火柴人向左加速移动。 按下D键控制火柴人向右加速。 游戏中按下esc键暂停游戏,再次按下esc键继续游戏。 游戏结束后按下R键重新开始游戏,按下B键返回游戏主菜单。

    第13届蓝桥杯Python省赛真题-研究生组(完整题目&源码).zip

    第13届蓝桥杯Python省赛真题-研究生组(完整题目&源码);第13届蓝桥杯Python省赛真题-研究生组(完整题目&源码);第13届蓝桥杯Python省赛真题-研究生组(完整题目&源码);

    管理后台项目开发脚手架,基于vue-element-admin和springboot搭建,前后端分离方式开发和部署.zip

    管理后台项目开发脚手架,基于vue-element-admin和springboot搭建,前后端分离方式开发和部署.zip

    node-v7.1.0-linux-armv6l.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v8.1.1-x86.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v8.14.1-x86.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics