纯JS实现图片预览与等比例缩放和居中

　　最近做项目时有一个需求，广告位图片上传时要预览，并且要等比例缩放和居中。已经保存的广告位图片显示时也要等比例缩放和居中。我使用了下面的代码实现，不过可能有一些小问题。

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  2 <html>

  3  <head>

  4   <title> ResizeImage </title>

  5   <meta name="Author" content="Ryan Shaw">

  6   <meta name="Keywords" content="Javascript,js,css,img,margin,onload,onchange">

  7   <meta name="Description" content="image preview and autoresize">

  8   <style type="text/css">

  9     .form-txt {

 10         height: 22px;

 11         padding-left: 3px;

 12         line-height: 22px;

 13         background-color: #FFFFFF;

 14         border: 1px solid #BBBBBB;

 15         vertical-align: middle;

 16         width: 200px;

 17         color: #666;

 18         font-size: 12px;

 19     }

 20     .release-hd{ background:#FFFFFF; border:1px solid #e5e5e5; padding:15px;}

 21     .item { margin:0 auto; padding-bottom: 10px; overflow: hidden; height:24px;}

 22     .item-name { float: left; font-size: 12px; padding-right: 8px; padding-top: 0px; text-align: right; width: 100px; color:#617b24; font-weight:700;}

 23   </style>

 24   <script type="text/javascript">

 25     // 不喜欢定义全局变量的同学可以不在这儿定义，我没有使用，用起来的话要好些个人认为

 26     var MAX_WIDTH = 300; // 最大宽度

 27     var MAX_HEIGHT = 200; // 最大高度

 28 

 29     // 预览图片

 30     function previewImage(file,order)  

 31     {

 32       var div = document.getElementById("preview");  

 33       if (file.files && file.files[0])  

 34       {  

 35         div.innerHTML = "<img id=\"imghead\">";  

 36         var img = document.getElementById("imghead");

 37         var reader = new FileReader();  

 38         reader.onload = function(evt){

 39             AutoResizeImage(300,200,img,evt.target.result);

 40         }  

 41         reader.readAsDataURL(file.files[0]);  

 42       }  

 43       else  

 44       {

 45         div.innerHTML = "<img id=\"imghead\">";  

 46         var img = document.getElementById("imghead");

 47         AutoResizeImage(300,200,img,file.value);

 48       }

 49     }

 50     

 51     // 缩放图片，imgSrc用户延迟加载图片url

 52     function AutoResizeImage(maxWidth,maxHeight,objImg,imgSrc){

 53         var img = new Image();

 54         img.src = imgSrc || objImg.src;

 55         var hRatio;

 56         var wRatio;

 57         var Ratio = 1;

 58         var w = img.width;

 59         var h = img.height;

 60         wRatio = maxWidth / w;

 61         hRatio = maxHeight / h;

 62         if (maxWidth ==0 && maxHeight==0){

 63         Ratio = 1;

 64         }else if (maxWidth==0){

 65         if (hRatio<1) Ratio = hRatio;

 66         }else if (maxHeight==0){

 67         if (wRatio<1) Ratio = wRatio;

 68         }else if (wRatio<1 || hRatio<1){

 69         Ratio = (wRatio<=hRatio?wRatio:hRatio);

 70         }

 71         if (Ratio<1){

 72         w = w * Ratio;

 73         h = h * Ratio;

 74         }

 75         objImg.style.height = Math.round(h) + "px";

 76         objImg.style.width = Math.round(w) + "px";

 77         

 78         if(h < maxHeight) { // 纵向有空余空间

 79             objImg.style.marginTop = Math.round((maxHeight - h) / 2) + "px";

 80         }

 81         if(w < maxWidth) { // 横向有空余空间

 82             objImg.style.marginLeft = Math.round((maxWidth - w) / 2) + "px";

 83         }

 84         if(!!!objImg.src)

 85             objImg.src = imgSrc;

 86     }

 87   </script>

 88  </head>

 89 

 90  <body>

 91   <div class="release-hd">

 92     <table>

 93         <tbody>

 94             <tr>

 95                 <td>

 96                     <p class="item">

 97                         <label class="item-name">图片：</label>

 98                         <input class="form-txt" type="file" name="adPic" onchange=previewImage(this)>

 99                     </p>

100                     <p class="item">

101                         <label class="item-name">链接：</label>

102                         <input class="form-txt" type="text" name="adUrl" value="">

103                     </p>

104                     <p class="item" style="height:72px">

105                         <label class="item-name">主题：</label>

106                         <textarea name="adTitle" cols=30 rows=10 style="height:66px" maxlength="250" class="form-txt"></textarea>

107                     </p>

108                         <span style="height:26px; font-weight:700; line-height:26px;color:#030; border:solid 1px #666;float:right; margin-right:10px;">

109                             <input type="button" style="height:26px;border: 0 none;color:#006600; width:60px;" value="保存" />

110                         </span>

111                 </td>

112                 <td>

113                     <div id="preview">

114                         <img id="imghead" width=300 height=200 border=0 src="http://su.bdimg.com/static/skin/img/logo_white.png" onload=AutoResizeImage(300,200,this)>

115                     </div>

116                 </td>

117             </tr>

118         </tbody>

119     </table>

120   </div>

121  </body>

122 </html>

　　实际上我没有测试IE8以下浏览器，不过有人是使用了滤镜来做，如果IE6这样实现不了的话就只能用滤镜了。

　　上面的代码其实只有一点需要注意：img的onload一定要在src设置之前绑定，不然不会被执行。特别是在谷歌等浏览器下。

　　偷个懒，验证文件是否为图片什么的我没写了哦。

 

 欢迎您移步我们的交流群，无聊的时候大家一起打发时间：Programmer Union

 或者通过QQ与我联系：点击这里给我发消息

 （最后编辑时间2013-08-20 23:08:39）

 

你可能感兴趣的:(图片预览)

  • vue3 图片预览 v-viewer 情话丫 vue
    vue3图片预览v-viewer百度没找到方法，自己看了源码发现的//添加依赖npminstallv-viewer//在main.js中注册import'viewerjs/dist/viewer.css';//引入样式importViewerfrom'v-viewer';//引入v-viewer组件constapp=createApp(App);Viewer.install(app)//在页面中使
  • 前端demo: 前端图片预览组件Viewer.js组件封装 Bee.Bee. 前端demo前端javascriptjquery
    1.简介Viewer.js是一款强大的图片查看器。我们通过Viewer.js在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便下载地址：GitHub-fengyuanchen/viewerjs:JavaScriptimageviewer.2.支持的功能支持53个选项支持23种方法支持17个事件支持模态和内联模式支持触摸支持移动支持缩放支持旋转支持缩放(翻转)支持键盘跨浏览
  • 我悟了！原来本地图片预览还能这样搞 前端javascript
    Hey,我是Immerse本文首发于【沉浸式趣谈】，我的个人博客https://yaolifeng.com也同步更新。转载请在文章开头注明出处和版权信息。如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！我悟了！原来本地图片预览还能这样搞在网页开发中，经常会遇到需要让用户上传图片并在上传前进行预览的需求。这样做的好处显而易见：用户可以立即看到自己选择的图片是否正确，避免了不必要的上传和服务
  • React AntDesign中上传图片预览功能 七月_Mo Jsreact.jsjavascripttypescript
    现需求就是上传之后的图片再次进入的时候该组件呈现可预览并且删除之后可以再次上传图片个数限制最多传3张效果如图：图片上传return(setAddItemShow(false)}>getAnnouncementApi(values)}>false}listType="picture-card"accept=".png,.jpg"fileList={pictureList}onPreview={han
  • 【项目推荐】Vue-Picture-Preview：轻量高效的图片预览解决方案 张姿桃Erwin
    【项目推荐】Vue-Picture-Preview：轻量高效的图片预览解决方案项目地址:https://gitcode.com/gh_mirrors/vu/vue-picture-preview在Web应用开发中，优雅地展示图片库是提升用户体验的重要一环。今天，我们来深入探讨一个专为Vue.js设计的友好图片预览插件——Vue-Picture-Preview，它基于强大的PhotoSwipe库，旨
  • uniapp 自定义图片预览组件PicturePreview（Vue3、组合式、ts） 舍予一 前端知识汇总uni-appjavascript前端
    组件import{ref}from'vue';constimages=ref>([]);constcurrentIndex=ref(0);constshow=ref(false);constscale=ref(1);functiononSwiperChange(e:any){scale.value=1;currentIndex.value=e.detail.current;}constonScal
  • 04商品详情 敲啊敲9527 vue3项目javascript开发语言ecmascript
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录详情页-热榜区域在Detail文件夹中新建组件接口导入调用渲染模版适配不同标题title图片预览sku组件(商品的一些规格)把components文件中的组件注册为全局组件，方便共享总结详情页-热榜区域在Detail文件夹中新建组件src\views\Detail\components\DetailHot.vue周日榜单一双鞋
  • Vue 图片预览功能实现指南 繁依Fanyi vue.js前端javascriptpython人工智能算法开发语言
    1.介绍在现代web应用程序中，图片预览功能提升了用户体验，使用户可以在上传图片之前查看图片内容。本文将详细介绍如何在Vue.js应用中实现图片预览功能，包括基本实现、进阶功能、与ElementUI的集成、常见优化技巧以及与其他库的结合使用。2.基本功能实现2.1环境准备确保你的开发环境已经配置好，包括VueCLI和Node.js。如果还没有安装VueCLI，你可以通过以下命令安装：npminst
  • uniapp媒体 小汤猿人类 uni-app媒体
    uni.previewImage实现图片放大预览//图片预览函数functiononPreview(index){//收集所有图片的urlvarurls=pets.value.data.map(item=>item.url)//预览图片uni.previewImage({current:index,//当前预览的图片索引urls:urls//所有图片的url数组})}
  • vue中实现图片裁剪 浮游本尊 vue.js前端javascript
    在现代Web应用中，图片处理是一个常见的需求。本文将介绍如何使用Vue.js结合Cropper.js实现一个简单的图片裁剪功能。以下是实现该功能的完整代码。代码实现预览上传图片取消确定代码解析：定义了一个容器，并根据type属性动态添加wd260类。：包含图片裁剪和预览的主要布局。：裁剪图片显示区域。：绑定了一个图片标签，用于显示裁剪的图片。：图片预览区域。：包含预览标题和预览图片。上传图片：上传
  • uniapp使用宫格实现多张图片预览 陈丹阳（滁州学院） uni-app
    一、页面渲染二、change函数change函数点击grid触发返回值e={detail:{index:0}}index为当前点击grid下标change(e){console.log(e,'indexs')uni.previewImage({urls:this.checkDetail.imgSrcs,current:e.detail.index,loop:true});
  • vue3+ts实现图片预览功能 前端fighter vue.jsjavascript前端
    首先，需要创建一个Vue组件，用于显示图片和预览图。import{ref}from'vue';exportdefault{props:{imageSrc:{type:String,required:true,},previewSrc:{type:String,required:true,},},setup(props){constpreviewVisible=ref(false);constsho
  • 《2021科幻稿、科幻小说投稿指南》2021-12-10更新（总奖金已超913万元人民币） 钟天心
    《2021科幻稿、科幻小说投稿指南》2021-12-10更新（总奖金已超913万元人民币）科幻爱好者投稿指南|2021.12.10图片预览如下科幻爱好者投稿指南|2021.12.10图片预览科幻爱好者投稿指南|2021.12.10
  • Content-Disposition 响应头，设置文件在浏览器打开还是下载(pdf文件在浏览器预览功能)图片预览功能浏览器下载功能 万事俱备就差一个程序员了
    Content-Disposition属性是作为对下载文件的一个标识字段，在rfc2616http://www.rfc-editor.org/rfc/rfc2616.pdf章节19.5AdditionalFeatures中有介绍，具体介绍请看http://www.rfc-editor.org/rfc/rfc1806.txt字段介绍如下：disposition:="Content-Dispositi
  • flutter3-dart-chat：基于flutter3+material-ui仿微信App聊天应用
    距离2024新春佳节还有3天时间，趁着佳节来临之际，使用全新跨多平台技术flutter3+dart3开发了一款仿微信App聊天界面实例项目Flutter3Chat。flutter3-wchat实现发送图文emoj表情消息+gif动图、长按仿微信语音操作面板、图片预览、红包及朋友圈等功能。技术栈开发工具：VScode框架技术：Flutter3.16.5+Dart3.2.3UI组件库：Material
  • 微信小程序-实现保存图片功能的3种方式 super_chh 小程序
    点击图片预览保存点击图片预览保存先通过wx.previewImage接口预览图片，然后长按图片弹出底部弹窗保存图片。这种方式的缺点是会多一个预览的步骤详细实现代码如下：wx.previewImage({current:'',//当前显示图片的http链接urls:['https://www.xxx.png',...]//需要预览的图片http链接列表})如果只想显示一张，那urls数组值只写一个即
  • vue3的常用功能 小马甲丫 #vue3javascript前端vue3
    文章目录一、前言二、自动注册全局组件2.1、自动注册`components`目录下所有`vue`组件并以组件的文件名为组件的名称2.2、使用这个插件2.3、为全局组件添加类型提示三、函数式图片预览四、手动封装`svgIcon`组件五、封装拖拽钩子函数六、`vscode`中`vue3`代码片段七、最后一、前言本文主要分享一下在使用vue3开发项目时的一些常用功能二、自动注册全局组件2.1、自动注册c
  • 【vue】v-viewer图片查看器的使用和通过函数直接打开图片预览 飘逸者打瞌睡 vue3vue2前端vue.js前端javascript
    引入v-viewer依赖包importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({Options:{'zIndex':99999,'zIndexInline':99999,'inline':true,'button':true,'navbar':true,'title'
  • vue3项目实现预览图片、旋转图片功能 Miraitowa_chole vue.js前端javascriptelementui前端框架lesssass
    一、需求：在点击图片时，能预览大图，弹出一个包含旋转图片功能按钮的弹窗。用户可通过点击按钮实现对图片的旋转操作二、思路：点击图片预览：用户通过点击图片触发预览功能。接收图片的URL，弹出一个模态框展示大图。旋转图片功能：在模态框内添加一个“旋转图片”按钮。定义两个变量：rotationAngle用于记录当前旋转角度，rotationStep设置为90度的常量，表示每次点击按钮旋转的角度。创建点击事
  • 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能 伽蓝寺听雨 前端开发d3.jsvue.jssvg
    【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg在svg中提添加元素函数使用使用总结说在最后前言概述最近项目开发过程中，前端需要有一个图片预览的组件，支持图片放大、缩小、拖拽等地图的基本功能，并且需要考虑后期扩展，可以在预览过程中添加标注。最初觉得这得用操作地图的插件才可以搞定，但仅
  • Winform写一个通用图片预览器管理，包含滚轮放大缩小，剪切，下一页，方向变化等 搬砖的诗人Z winformwindowswinfrom
    usingMetroFramework.Forms;usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Drawing.Drawing2D;usingSystem.Drawing.Imaging;usingSys
  • 小程序图片预览 三为科技
    一个页面有3张图片，点击其中任意一张都可以放大预览。然后在预览的时候，左右滑动，还可以看另外两张图片。话不多说，直接上代码1，首先定义一个页面image.wxml这个页面很简单，就是放三个image用来显示imgList数组里的三张图片。2，实现图片放大效果的核心方法如下。上图是官方的示例。我们来看下实际中是如何使用的。3把image.js的完整代码贴出来。Page({data:{imgList:
  • uni-app移动端图片预览组件 movable-area 、movable-view （支持缩放，拖动效果、替换部分代码图片可直接使用） 前端白袍 uni-appjavascript前端
    UniApp图片预览组件利用uni-app官方、内置视图组件配合uView组件的u-popup弹框组件共同实现封装的图片预览组件，支持手指缩放、拖动效果，替换代码中部分图片后可以直接使用。效果图：组件代码：//图片预览组件代码//预览组件关闭隐藏按钮//需要展示的图片exportdefault{name:"photo-preview",props:{//父组件控制显示showPicPreview:
  • vant的图片上传组件预览问题 xiaozaq vant前端服务器vant
    先记录问题：主要是我直接吧图片的base64字符串存入了数据库，再次打开页面加载图片时，要么就是页面显示图片错误，要么就是点击图片预览时查看失败（因为使用的vue+vant+cordova+sqlite实现单机版应用，不希望联网，所以直接把图片存数据库了）。vant版本是4.8.0当file对象设置属性url值是"data:image/png;base64,iVBORw0KG..."格式时，页面显
  • vue实现图片预览放大缩小功能 西蜀漫山桃花 随笔vue.jsjavascript前端
    ImgShow.vue代码如下：exportdefault{name:'ImgShow',props:{file:{type:String,default:''}},data(){return{test:'',pictShow:false,zoomInShow:false,params:{zoomVal:1,left:0,top:0,currentX:0,currentY:0,flag:false
  • vue 使用 v-viewer 用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。 未飞 vue插件vuevue.js前端javascript
    作者连接npm：[email protected]引入：//引入Viewer插件importVueViewer,{directiveasviewerDirective}from'v-viewer';//引入Viewer插件的图片预览器的样式import'viewerjs/dist/viewer.css';//使用Viewer图片预览器Vue.use(V
  • Flutter WebView之给H5网页图片添加点击事件以实现原生图片预览 wahkim Flutter开发flutter
    FlutterWebView之给H5网页图片添加点击事件以实现原生图片预览前言环境及插件代码实现参考前言网上很多方案，都是获取html中的图片列表，再往里面添加点击事件。思路是没错的，但是由于很多H5使用的VUE或者Ajax等技术异步加载渲染，因此此处需要借助jQuery库给一步渲染的img动态绑定事件。具体怎么做，往下看。环境及插件插件：flutter_webview_proiOS：WKWebv
  • JAVA爬虫案例——JSOUP爬取图片并使用v-viewer实现图片预览 北溟溟 JAVAjava爬虫
    前言网络爬虫是大数据时代收集数据的一种有效手段，合理合法的运用技术手段获取网络数据，实现数据的再利用也是程序员的一项重要技能。本节我们使用java环境下的jsoup实现网络数据的爬取，主要是图片数据的异步爬取，并实现网络图片的下载及图片的预览功能，预览功能使用具有丰富功能的v-viewer实现。正文引入爬虫pom工具包org.apache.httpcomponentshttpclient4.5.6
  • 基于react+antd +华为云OBS，写上传+图片预览 ☞你你你☜ 前端OBSreact.js华为云javascript
    之前在网上也找不到Web具体实行OBS上传的代码，自己试着写了一下，感觉也还行，仅供参考，话不多说上代码import*asReactfrom"react";import{Upload,Button,Icon,message,Modal}from"antd";import"./uploads.less";exportdefaultclassUploadDataextendsReact.Compone
  • layui 监听checkbox,checkbox全选，反选，日期使用，select赋值，图片预览上传 程序小院 前端JavaScriptlayuijavascript前端
    1、checkbox使用form.render('checkbox')//再次渲染，不能选的时候需要再次渲染使用2、全选，反选form.on('checkbox(product_checkbox_all)',function(data){if(data.elem.checked){//判断选中//全选$("input[name='article[]']").each(function(){this
  • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
    好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
  • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
    10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
  • java 实现自定义链表 CrazyMizzz java数据结构
    1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
  • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
      作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
  • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
    今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
  • linux回收站 _wy_ linux回收站
    今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
  • jquery回到页面顶端 知了ing htmljquerycss
    html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
  • B树、B-树、B+树、B*树 矮蛋蛋 B树
    原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
  • 数据库连接池 alafqq 数据库连接池
    http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
  • java泛型 百合不是茶 java泛型
    泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
  • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
    一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
  • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
    一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
  • 【Gson四】范型POJO的反序列化 bit1129 POJO
    在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
  • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
    几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
  • NGINX + LUA实现复杂的控制 ronin47 nginx lua
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-递归判断数组是否升序 bylijinnan java
    public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
  • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
    Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
  • Java工具之JPS chinrui java
    JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
  • window.print分页打印 ctrain window
    function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
  • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
    在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
  • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
    一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
  • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
    使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
  • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
    转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
  • Android关于短信加密 gqdy365 android
    关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
  • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
    假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
  • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
    编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
  • 单实例实践 跑龙套_az 单例
       1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
  • PO VO BEAN 理解 q137681467 VODTOpo
    PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
  • 战胜惰性，暗自努力 金笛子 努力
    偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
  • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
    多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他