使用html5+的plus调起相机拍照,使用canvas压缩图片,转成base64传到后台

这里写图片描述

html代码:

            <div class="form-com door"><label for="">门头照:</label><a href="javascript:void(0);"  onclick="getImage(1)"><img id="img1" class="img" src="" alt=""></a></div><div class="form-com licence"><label for="">营业执照:</label><a href="javascript:void(0);" onclick="getImage(2)"><!-- <input class="upload-img" type="file" onchange="setimgsrc(this,'img1');" accept="image/*" capture="camera"> --><img id="img2" class="img" src="" alt=""></a></div><div class="form-com shop-panorama"><label for="">店铺全景:</label><a href="javascript:void(0);" onclick="getImage(3)"><img id="img3" class="img" src="" alt=""></a></div>

js代码:

// 初始化plusdocument.addEventListener( "plusready", onPlusReady, false );// 扩展API加载完毕,现在可以正常调用扩展API function onPlusReady() {console.log("plusready");}// 调用手机的拍照功能function getImage(obj){ var cmr = plus.camera.getCamera();cmr.captureImage(function(p){plus.io.resolveLocalFileSystemURL(p, function(entry){img=document.getElementById("img"+obj);img.src=entry.toLocalURL();img.style.opacity = 1;}, function(e){outLine('读取拍照文件错误:'+e.message);});}, function(e){}, {filename:'_doc/camera/',index:1});
}// 用convas绘制图片function dealImage(path, obj, callback){var img = new Image();img.src = path;img.onload = function(){var that = this;// 默认按比例压缩var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);var quality = 0.5;  // 默认图片质量为0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h);// 图像质量if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}// quality值越小,所绘制出的图像越模糊var base64 = canvas.toDataURL('image/jpeg', quality );// 回调函数返回base64的值callback(base64);}}var time = null;var view = '';var view1 = '';var view2 = '';// 提交注册的信息$(document).on('click','.submit button',function(){dealImage($('#img1').attr('src'),$('#img1')[0],function(base641){view = base641;});dealImage($('#img2').attr('src'),$('#img2')[0],function(base642){view1 = base642;});dealImage($('#img3').attr('src'),$('#img3')[0],function(base643){view2 = base643;            });time = setTimeout(function(){httppost(view,view1,view2);},2000);});
到此处调用手机拍照,压缩并上传到后台完成,view,view1,view2分别是basse64

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1亿人点赞的晚会,如何做技术沉淀?

阿里妹导读&#xff1a;今年是双11的第11年&#xff0c;猫晚的第5年。今年的天猫双11狂欢夜(简称“猫晚”)有超200个国家和地区通过优酷APP观看猫晚直播。5144万人通过猫晚公益直播间观看明星卖农货&#xff0c;网友在淘宝直播间点赞1亿次&#xff0c;海外艺人参与的节目超过了…

K8s 集群节点在线率达到 99.9% 以上,扩容效率提升 50%,我们做了这 3 个深度改造

导读&#xff1a;2019 年阿里巴巴核心系统 100% 以云原生方式上云&#xff0c;完美地支撑了 双11 大促。这次上云的姿势很不一般&#xff0c;不仅是拥抱了 Kubernetes&#xff0c;而且还以拥抱 Kubernetes 为契机进行了一系列对运维体系的深度改造。 Kubernetes 作为云原生的最…

IDC:移动云进入云运营服务市场前五!

据IDC最新发布的《中国云运营服务市场跟踪&#xff0c;2019H2》显示&#xff0c;2019年下半年中国云运营服务市场规模达到107亿&#xff0c;同比增长27.9%。其中&#xff0c;移动云在全国云运营服务市场份额中占比4.9%&#xff0c;排名进入前五。什么是云运营市场服务&#xff…

三级联动

引入插件的css和js代码&#xff1a; <link href"./css/LArea.css" rel"stylesheet" > <script src"./js/LAreaData1.js"></script> <script src"./js/LArea.js"></script> html代码&#xff1a; <…

Attribute “singleton” must be declared for element type “bean”.

文章目录一、分析定位1.异常现象2.分析定位二、解决方案2.1.找坐标2.3. 找jar包2.3. 打开jar包2.4. 找目录2.5. 编辑xfire.xml2.6. 编辑xfireXmlBeans.xml一、分析定位 1.异常现象 Attribute “singleton” must be declared for element type “bean”. 2.分析定位 因为&a…

高德JS依赖分析工程及关键原理

一、背景 高德 App 进行 Bundle 化后&#xff0c;由于业务的复杂性&#xff0c;Bundle 的数量非常多。而这带来了一个新的问题——Bundle 之间的依赖关系错综复杂&#xff0c;需要进行管控&#xff0c;使 Bundle 之间的依赖保持在架构设计之下。 并且&#xff0c;为了保证 Bu…

为了这个技术,操作系统把 CPU 害惨了!

来源 | 编程技术宇宙责编 | Carol封图 | CSDN 下载自视觉中国内存访问瓶颈我是CPU一号车间的阿Q&#xff0c;前一阵子我们厂里发生了一件大喜事&#xff0c;老板拉到了一笔投资&#xff0c;准备扩大生产规模。不过老板挺抠门的&#xff0c;拉到了投资也不给我们涨点工资&#x…

一个周内上线50个增长策略,竟然能这么高效!

导读&#xff1a;年初的一个晨会上&#xff0c;用户增长负责人湘翁问我说&#xff1a;一个周内上线50个增长策略&#xff0c;技术兄弟们能做到么&#xff1f; 在闲鱼用户增长业务上的实验 闲鱼的用户增长业务具有如下现状&#xff1a; 闲鱼的卖家都是普通小卖家&#xff0c;而…

cannot convert value of type ‘org.codehaus.xfire.spring.editors.ServiceFactoryEditor

文章目录一、分析定位1.异常现象2. 分析定位二、解决方案2.1.找坐标2.3. 找jar包2.3. 打开jar包2.4. 找目录2.5. 编辑customEditors.xml一、分析定位 1.异常现象 cannot convert value of type ‘org.codehaus.xfire.spring.editors.ServiceFactoryEditor 2. 分析定位 原因…

网商银行首席架构师余锋:网商银行的每一笔贷款都是AI贷款

11月28日&#xff0c;在2019年度观察家金融峰会上&#xff0c;网商银行首席架构师余锋表示&#xff0c;网商银行在人工智能领域一直在探索新的应用方向&#xff0c;目前网商银行的每一笔贷款都是AI贷款。 网商银行是国内首家运行在云上的银行&#xff0c;没有线下网点&#xf…

解密 云HBase时序引擎OpenTSDB 优化技术

逝者如斯夫&#xff0c;不舍昼夜。 —— 孔子 时间如流水&#xff0c;一去不复返。自古不乏对时间流逝的感慨&#xff0c;而现代已经有很多技术记录流逝的过去。我们可以拍照&#xff0c;可以录像&#xff0c;当然还可…

官宣!CSDN 重磅发布「AI开源贡献奖Top5」「AI新锐公司奖Top10」「AI优秀案例奖Top30」三大榜单...

2020 年无疑是特殊的一年&#xff0c;AI 在开年的这场“战疫”中表现出惊人的力量。站在“新十年”的起点上&#xff0c;CSDN发起【百万人学AI】评选活动。我们继续聚焦AI的技术落地&#xff0c;关注开源和新生的力量。作为CSDN第三届AI评选活动&#xff0c;本次活动受到数百家…

SpringBoot2 整合 XFIRE 服务端和客户端

文章目录一、集成XFIRE1. 版本选型2. 导入依赖3. 注入XFireSpringServlet4. 创建一个xml文件5. 使用ImportResource注入xml6. 创建WebService接口6. 创建实现类7. 添加配置类8. 工具类二、XFIRE 发布服务2.1. 运行项目2.2. 异常解决2.3. 测试验证三、XFIRE客户端开源源码.一、集…

css3动画过渡按钮

css(css代码是网上找的)和html代码&#xff1a; .mui-switch {width: 52px;height: 31px;position: relative;border: 1px solid #dfdfdf;background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;border-top-left-radius: 20px;border-top-right-ra…

阿里云上万个 Kubernetes 集群大规模管理实践

内容简介&#xff1a; 阿里云容器服务从2015年上线后&#xff0c;一路伴随并支撑双十一发展。在2019年的双十一中&#xff0c;容器服务ACK除了支撑集团内部核心系统容器化上云和阿里云的云产品本身&#xff0c;也将阿里多年的大规模容器技术以产品化的能力输出给众多围绕双十一…

SpringBoot2 整合 AXIS 服务端和客户端

文章目录一、服务端1. 版本选型2.导入依赖3. SERVLET4. 接口5.实现类6. 配置工厂7.启动类8. WEB-INF目录18. WEB-INF目录29. /目录19. /目录210. wsdd11. 测试验证二、客户端开源源码.一、服务端 1. 版本选型 阿健/框架版本spring-boot2.5.4axis1.4axis-jaxrpc1.4commons-dis…

地理文本处理技术在高德的演进(下)

在【上篇】里&#xff0c;我们介绍了地理文本处理技术在高德的整体演进&#xff0c;选取了几个通用query分析的点进行了介绍。下篇中&#xff0c;我们会选取几个地图搜索文本处理中特有的文本分析技术做出分析&#xff0c;包括城市分析&#xff0c;wherewhat分析&#xff0c;路…

真正拿大厂offer的人,都赢在这一点

学好一门技术最有价值的体现就是“面试”&#xff0c;对于大部分人来说 “面试”是涨薪的主要途径之一&#xff0c;因此我们需要认真的准备面试&#xff0c;因为它直接决定着你今后几年内的薪资水平&#xff0c;所以在面试这件事上花费再多的时间和精力都是值得的。你会发现有…

今天的这个小成绩,需要向阿里云的朋友报告一下!

今天&#xff0c;想向大家报告一个最新的小成绩&#xff1a; 在数据库领域的权威评选——Gartner全球数据库魔力象限评比中&#xff0c;阿里云成功进入“挑战者”象限&#xff0c;连续两年作为唯一的中国企业入选。 最新评选表明&#xff0c;阿里云过去一年在产品技术领域进展迅…