weixin_33947521
weixin_33947521

图片圆角并居中显示解决方案

1、图片圆角显示

例如（非常简单）：

HTML：

<img src="mao.png" />

CSS：

img{
    border-radius: 10px;
}

如果图片只为圆角，这种方式确实没问题，但如果还要加上居中的效果，这种方式就有问题，下面会说明。

2、图片居中显示（铺满父容器且不变形）

效果图如下：

PS：为了实现上图居中的效果，单靠CSS是不行的，还需要JS处理。

例如：

HTML：

<div class="rd-box" style="width:200px;height:200px;overflow:hidden;">
    <img src="mao.png" onload="centerThisImg(this, 200, 200)"/>
div>

CSS：

.rd-box{
    position: relative;
    display: inline-block;
    border-radius: 10px;
}
.rd-box img{
    display: block;
    border-radius: 10px;   
}

JS：

//图片自适应填充，并居中显示。
function centerThisImg(el, maxWidth, maxHeight){
    var $img = $(el),
        img = $img[0];
    var imgHeight = img.naturalHeight,
        imgWidth = img.naturalWidth,
        finalWidth,
        finalHeight,
        tsffix = '';
    var rm = maxWidth / maxHeight,
        r = imgWidth / imgHeight;

    if(r < rm){
        finalWidth = maxWidth;
        finalHeight = maxWidth / r;
        tsffix = 'translateY(-' + (finalHeight - maxHeight) / 2 + 'px)';
    } else {
        finalHeight = maxHeight;
        finalWidth = maxHeight * r;
        tsffix = 'translateX(-' + (finalWidth - maxWidth) / 2 + 'px)';
    }
    $img.css({width: finalWidth, height: finalHeight, transform: tsffix});
}

PS：图片的长宽是不定的，为了让图片不变形的铺满父容器，需要重新计算图片长宽，并计算居中需要位移的距离。

从这一点就可以看到我说的问题，在CSS中我是加上圆角的样式，但实际上却没有圆角效果。

这是因为当我们把图片居中（不变形）时，我们看到的现在居中的四角，其实是图片中间部位，真正图片的四角早在不可见的地方。

所以，想让居中的图片再有圆角效果，得另外想办法。

3、遮挡法模拟出圆角

我们可以用四个内凹三角形，遮挡在图片四角上（居中后的），让人误以为是图片圆角了。

例如（结合居中的完整代码）：

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正方形居中显示并且圆角title>
    <style>
        img{
            height: 200px;
        }
        label{
            display: block;
        }
        .rd-box2{
            position: relative;
            display: inline-block;
        }
        .rd-box2 img{
            display: block;
        }
        .rd-box2 .left-top,
        .rd-box2 .right-top,
        .rd-box2 .left-bottom,
        .rd-box2 .right-bottom{
            position: absolute;
            width: 10px;
            height: 10px;
            z-index: 1;
        }
        .rd-box2 .left-top{
            top: 0;
            left: 0;
            background: radial-gradient(20px at right bottom,transparent 50%,#F4F4F4 50%);
        }
        .rd-box2 .right-top{
            top: 0;
            right: 0;
            background: radial-gradient(20px at left bottom,transparent 50%,#F4F4F4 50%);
        }
        .rd-box2 .left-bottom{
            bottom: 0;
            left: 0;
            background: radial-gradient(20px at right top,transparent 50%,#F4F4F4 50%);
        }
        .rd-box2 .right-bottom{
            bottom: 0;
            right: 0;
            background: radial-gradient(20px at left top,transparent 50%,#F4F4F4 50%);
        }
    style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
    <script>
        //图片自适应填充，并居中显示。
        function centerThisImg(el, maxWidth, maxHeight){
            var $img = $(el),
                img = $img[0];
            var imgHeight = img.naturalHeight,
                imgWidth = img.naturalWidth,
                finalWidth,
                finalHeight,
                tsffix = '';
            var rm = maxWidth / maxHeight,
                r = imgWidth / imgHeight;

            if(r < rm){
                finalWidth = maxWidth;
                finalHeight = maxWidth / r;
                tsffix = 'translateY(-' + (finalHeight - maxHeight) / 2 + 'px)';
            } else {
                finalHeight = maxHeight;
                finalWidth = maxHeight * r;
                tsffix = 'translateX(-' + (finalWidth - maxWidth) / 2 + 'px)';
            }
            $img.css({width: finalWidth, height: finalHeight, transform: tsffix});
        }
    script>
head>
<body>
    <label>正方形居中显示并且圆角：label>
    <div class="rd-box2" style="width:200px;height:200px;overflow:hidden;">
        <i class="left-top">i>
        <i class="right-top">i>
        <i class="left-bottom">i>
        <i class="right-bottom">i>
        <img src="mao.png" onload="centerThisImg(this, 200, 200)"/>
    div>
body>
html>
View Code

效果图如下：

总结：

其实，如果图片能够继承父元素的圆角效果，那么就不需要这么麻烦，但是现实是图片元素四个角会超出父元素（设了圆角）。

我查阅了资料，有人说这种行为是浏览器默认特性，就是这样效果（https://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content）。

我实际的测试也是这样，不过，就不深究了。

 

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/10015829.html

你可能感兴趣的:(图片圆角并居中显示解决方案)

  • 前端开发：Web蜜罐详解 三掌柜666 前端网络安全
    前言在当今数字化时代，网络安全威胁日益复杂，攻击手段层出不穷。对于前端开发人员来说，不仅要关注代码的性能和用户体验，还需要具备应对安全威胁的能力。在网络安全领域，Web蜜罐作为一种主动防御技术，正逐渐受到关注，它通过模拟真实的Web应用程序，吸引攻击者并记录其行为，为安全专家提供了宝贵的情报。对于前端开发人员来说，了解Web蜜罐的工作原理、特点和应用场景具有重要意义。那么本文就来探讨Web蜜罐的工
  • ELK traceId 通过A服务调用B服务举例 C18298182575 elkhivehadoop
    在分布式系统中，traceId需要在服务之间传递，以确保整个请求链路的日志能够被追踪。下面我们通过一个具体的例子，展示如何通过A服务调用B服务时传递traceId，并确保日志中能够正确记录traceId。实现思路A服务生成traceId：在A服务的HandlerInterceptor中生成traceId，并将其放入MDC。A服务调用B服务时传递traceId：在A服务调用B服务时，将traceId
  • Angular 15升级指南：解决Polyfills错误 t0_54program 编程问题解决手册angular.jsjavascript前端个人开发
    引言最近，Angular15正式发布，带来了许多新特性和改进。然而，在升级过程中，开发者们常常会遇到一些迁移问题。本文将详细讨论在升级到Angular15时，如何处理polyfills.ts文件引发的错误，并提供一个实际的解决方案。问题背景在升级Angular14到Angular15的过程中，很多开发者可能已经执行了如下命令：ngupdate@angular/core@15@angular/cli
  • Angular 16 Standalone 项目创建指南 t0_54program 编程问题解决手册angular.js前端javascript个人开发
    在前端开发领域，Angular一直是一个强有力的框架，尤其是在处理复杂的单页应用时。随着Angular16的发布，引入了Standalone组件的概念，这为开发者提供了一种新的方式来组织和管理组件。今天，我将详细介绍如何从头开始创建一个基于Angular16的Standalone项目，并解决一些常见的问题。环境准备首先，确保你的开发环境已安装Node.js和npm（NodePackageManag
  • Angular 15 表单控制迁移指南 t0_54program 编程问题解决手册angular.js前端javascript个人开发
    在升级Angular项目时，经常会遇到一些需要特别注意的问题。最近，我们在从Angular10迁移到Angular15时，遇到了一个关于表单控制的错误：ERRORError:Cannotfindcontrolwithpath:'mappedHeaders->0->value'。这篇博客将详细解释这个错误的原因，并提供解决方案。问题描述在Angular10中运行良好的代码，在迁移到Angular15
  • 【云原生】深入浅出 K8s 设备插件技术（Device Plugin） 碣石潇湘无限路 kubernetes容器云原生
    摘要：Kubernetes提供了DevicePlugin机制，用于向kubelet上报硬件信息并配置容器资源。本文以NVIDIAGPUPlugin为例，通俗易懂并深入浅出地剖析注册、ListAndWatch、Allocate及kubelet管理流程，介绍常见问题和配置要点。先用一张原理概览图把DevicePlugin和kubelet之间的交互勾勒出来，让大家感受下插件技术的整体架构（示例以NVID
  • jenkins通过ssh连接远程服务器出错解决方案（Algorithm negotiation fail） luopeng207663436 jenkinsssh服务器
    错误截图jenkins.plugins.publish_over.BapPublisherException:FailedtoconnectandinitializeSSHconnection.Message:[Failedtoconnectsessionforconfig[192.168.13.104].Message[Algorithmnegotiationfail]]将需要连接的目标服务器通
  • 轻松管理CSV数据，Python csv库全解析 嘎啦AGI实验室 Pythonpythonandroid数据库Pythoncsv
    文章目录轻松管理CSV数据，Pythoncsv库全解析背景介绍csv库是什么？如何安装csv库？五个简单的库函数使用方法1.读取CSV文件2.写入CSV文件3.使用DictReader读取CSV4.使用DictWriter写入CSV5.指定分隔符五个场景使用代码说明场景1：读取CSV并统计数据场景2：将查询结果写入CSV场景3：读取CSV并过滤数据场景4：读取CSV并排序数据场景5：读取CSV并合
  • 使用Python爬取豆瓣用户信息：从入门到实战 Python爬虫项目 2025年爬虫实战项目python开发语言人工智能爬虫大数据
    引言豆瓣作为一个知名的社交平台，拥有丰富的用户信息。对于数据分析师、研究人员或普通用户来说，获取豆瓣用户信息具有重要的价值。本文将详细介绍如何使用Python及其相关库来爬取豆瓣用户信息，并展示如何利用最新的技术手段来实现这一目标。1.准备工作在开始编写爬虫之前，我们需要准备一些工具和环境：Python3.x：确保你已经安装了Python3.x版本。Requests库：用于发送HTTP请求。Bea
  • python中将字符串转换成数字，并且保留两位小数 上趣工作室 pythonpython后端
    在Python中，你可以使用float()函数将字符串转换为数字，并使用字符串格式化来保留小数点后两位。下面是一个示例代码：defconvert_to_float(string):try:number=float(string)formatted_number="{:.2f}".format(number)returnformatted_numberexceptValueError:return"
  • rapidocr-onnxruntime库及在open-webui上传PDF 图像处理 (使用 OCR)应用 原野AI 大模型部署pdfocr深度学习open-webui
    背景rapidocr-onnxruntime是一个跨平台的OCR库，基于ONNXRuntime推理框架。目前已知运行速度最快、支持最广，完全开源免费并支持离线快速部署的多平台多语言OCR。缘起：百度paddle工程化不是太好，为了方便大家在各种端上进行ocr推理，我们将它转换为onnx格式，使用Python/C++/Java/Swift/C#将它移植到各个平台。名称来源：轻快好省并智能。基于深度学
  • 孪生网络模型，当训练集与测试集共用一个数据集时，训练准确率为100%，而测试准确率仍在50%左右浮动 bug菌¹ 全栈Bug调优(实战版)pytorch机器学习
    本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！问题描述【问题】孪生网络模型，测试效果异常：当训练集与测试集共用一个数据集（样本、标签完全相同）时，训练准确率为100%，而测试准确率仍在50%左右浮动（正常来说测试的都
  • 2025年 国内UWB的企业排行榜 人员安全定位 物联网
    截至2024年，中国UWB（超宽带）领域的企业在技术研发、市场应用和行业影响力方面表现突出。以下是一个基于技术实力、市场份额和行业影响力的国内UWB企业排行榜，供参考：1.品铂科技（Pinpoint）核心优势：专注于UWB高精度定位技术，定位精度可达厘米级。在工业、电厂、司法、监狱管理等领域有丰富的应用经验。应用领域：智慧工业、矿山、物流、司法监狱管理、智慧化工等。提供完整的UWB解决方案，涵盖硬
  • C 结构体基础练习题 噜噜soeur c语言开发语言
    这些题目都是我自己练过挑选出来的，有错误请指出哦谢谢定义一个名为“Student”的结构体，其中包含成员的name（姓名）、age（年龄）和totalMarks（总分）。编写一个C程序来输入两个学生的数据，显示他们的信息，并找到总分的平均值。#includestructStudent{charname[50];intage;floattotalMarks;};intmain(){//Declare
  • 外呼系统破局电话管控：AI电销机器人合规运营实战指南 ai_vx_3307623172 WX_3307623172AI机器人外呼中心人工智能机器人云计算语音识别服务器开源软件
    随着运营商对电话卡管控日趋严格，某金融科技公司曾因单日外呼超限导致80%号码被封——这一案例暴露出AI电销机器人在效率与合规间的矛盾。但数据显示，采用合规策略的企业外呼接通率仍能保持38%以上，关键在于建立适配监管环境的智能外呼体系。一、破解封号困局的三大核心策略1.运营商白名单通道接入三大运营商均开放企业智能外呼专线，这类线路具备免封号特性。某教育机构接入电信AI-PaaS平台后，日均外呼量稳定
  • 思特奇实践项目入选2024年“数据要素×”大赛优秀项目案例集 资讯分享周 科技
    2024年“数据要素×”大赛是国内首个聚焦数据要素开发应用的全国性大赛,由国家数据局联合有关部门主办,活动围绕《“数据要素×”三年行动计划(2024—2026年)》部署的工业制造、现代农业、文化旅游等12个行业领域对应设置12个赛道,旨在遴选出一批应用成效显著、创新性强、引领效应好的数据要素开发利用解决方案,带动相关技术产业发展。首届“数据要素×”大赛吸引了来自政产研学用等领域的近2万支队伍、10
  • BOE(京东方)绵阳“零碳工厂”探访活动圆满落幕 树立显示产业绿色转型新标杆 资讯分享周 人工智能大数据
    2025年3月13日,BOE(京东方)“零碳工厂”探访活动在绵阳成功举办,此次活动邀请KOL及媒体代表齐聚京东方绵阳第6代柔性AMOLED生产线,深度探访国内显示行业首个“零碳工厂”。通过实地观摩与技术交流,BOE(京东方)全方位展示了其在绿色制造领域的突破性成果——从100%可再生能源覆盖到全流程碳足迹管理,从技术创新驱动减排到低碳模式行业复制,见证了公司多年来在可持续发展领域的持续投入与引领作
  • 焊接机器人与线激光视觉系统搭配的详细教程 自动化专业爱好者 机器人opencv人工智能
    以下是关于焊接机器人与线激光视觉系统搭配的详细教程，包含核心程序框架、调参方法及源码实现思路。本文综合了多个技术文档与专利内容，结合工业应用场景进行系统化总结。一、系统硬件配置与视觉系统搭建1.硬件组成焊接机器人系统通常由以下模块构成：线激光视觉传感器：用于发射线激光并采集焊缝图像（如英莱科技PF系列传感器，支持4K视频监控与微间隙焊缝检测）。机器人本体与焊枪：需支持外部轴控制，传感器通过夹具安装
  • Python 爬虫实战：国际航班数据抓取与全球航班网络分析 西攻城狮北 python爬虫开发语言
    一、引言随着全球化的加速，国际航班网络已成为现代交通体系的重要组成部分。通过分析国际航班数据，我们可以深入了解全球航空枢纽、热门航线以及航班流量的变化趋势。本文将介绍如何通过爬取国际航班数据，分析全球航班网络的情况，并给出实现爬虫和数据分析的详细过程及代码。二、项目背景与目标2.1项目背景航空交通是全球经济和旅游业的核心部分，了解全球航班网络有助于掌握各大航空公司之间的竞争格局、全球机场的枢纽作用
  • 以下列举了一些典型的JavaScript网页设计实例，它们展示了多样化的功能和交互体验，非常适合初学者及中级开发者学习借鉴如下: 一一代码 javascript
    1.动态导航栏-功能描述：创建响应导航栏，当用户滚动页面时，导航栏固定在页面顶部，并显示当前页面部分。-技术点：-`window.scroll`事件监控页面滚动。-`classList`动态添加/移除CSS类。-`IntersectionObserver`检测元素是否进入视口。-示例代码：```javascriptwindow.addEventListener('scroll',()=>{cons
  • 《Python实战进阶》小技巧 1：一篇文章讲完网站部署如何优化网站照片加载/访问提速的方法 带娃的IT创业者 Python实战进阶pythonphp网络
    一篇文章讲完网站部署如何优化网站照片加载/访问提速的方法摘要在网络速度较低的情况下，大量照片会导致网站加载缓慢。本文档详细介绍了优化家庭网站中照片加载速度的多种方法和技术。以下是主要的优化策略及其具体实现：1.图片压缩与优化自动压缩上传的图片：通过Python脚本使用PIL库压缩图片，调整大小、转换模式，并保存为优化的JPEG格式。批量优化现有图片：编写脚本对文件夹中的图片进行批量处理，包括创建备
  • uniapp中生成视频的第一帧图片 进阶的巨人001 uni-app音视频mp4第一帧封面
    需求页面显示这个视频，封面要求是视频里面的内容，然后点击出现弹窗，视频在弹窗里面播放constvideo_url='.mp4'一.最好用的办法是，直接用背景图二.就是用renderjs了(因为app没有dom)，通过创建video标签，然后通过canvas绘制图片的方式设置链接-->设置链接exportdefault{data(){return{vsrc:{},//用于renderjs通信imgS
  • 自动化测试：从入门到精通的全面指南 测试工程师成长之路 测试工程师成长之路自动化测试
    一、引言在当今数字化时代，软件行业蓬勃发展，软件产品的更新换代愈发频繁。为了确保软件的质量和稳定性，测试工作变得至关重要。然而，随着软件规模的不断扩大和功能的日益复杂，传统的手工测试方法逐渐暴露出效率低下、容易出错等问题。自动化测试作为一种高效、可靠的测试手段，应运而生并迅速发展，成为现代软件测试领域不可或缺的一部分。自动化测试是指借助专门的测试工具和编程技术，将原本由人工执行的测试用例转化为机器
  • 数据分布偏移检测：保障模型在生产环境中的稳定性 trust Tomorrow 机器学习python机器学习人工智能深度学习
    数据分布偏移检测：保障模型在生产环境中的稳定性引言在机器学习系统从开发环境部署到生产环境的过程中，数据分布偏移问题是影响模型性能的主要挑战之一。当训练数据与生产环境中的数据分布不一致时，即使是经过精心调优的模型也可能表现出明显的性能下降。本文将深入探讨数据分布偏移的检测方法，并提供一套系统化的解决方案，帮助读者构建更加稳健的机器学习系统。1.数据分布偏移问题概述1.1分布偏移的类型数据分布偏移主要
  • Sass：深度解析与实战应用 li_Michael_li sass前端css
    在前端开发的浪潮中，CSS预处理器因其强大的功能和灵活性而备受推崇。其中，Sass（SyntacticallyAwesomeStylesheets）无疑是这些预处理器中的佼佼者。本文将深入解析Sass的核心概念、语法特性以及实战应用，并通过代码样例展示其强大的功能。Sass是什么？Sass（SyntacticallyAwesomeStylesheets）是一种CSS预处理器，它允许我们使用变量、嵌
  • 模拟退火算法详解 琛哥的程序 算法模拟退火算法机器学习
    一、引言模拟退火算法（SimulatedAnnealing，简称SA）是一种通用概率型优化算法，用来在一个大的搜寻空间内找寻问题的最优解。其出发点是基于物理中固体物质的退火过程与一般组合优化问题之间的相似性。模拟退火算法从某一较高初温出发，伴随温度参数的不断下降,结合概率突跳特性在解空间中随机寻找目标函数的全局最优解，即在局部最优解能概率性地跳出并最终趋于全局最优。二、算法原理物理退火过程加温过程
  • 在线 SQL 转 Python ORM工具 A__tao sqloracle数据库
    一款高效的在线SQL转PythonORM，支持自动解析SQL语句并生成PythonORM模型代码，适用于数据库管理、后端开发和ORM结构映射。无需手写ORM模型，一键转换SQL结构，提升开发效率，简化数据库操作。gotool
  • 透视B/S架构与C/S架构：构建未来网络应用的智慧选择 无限大. 杂谈架构
    透视B/S架构与C/S架构：构建未来网络应用的智慧选择在信息技术迅猛发展的今天，网络架构的选择对企业和开发者来说至关重要。B/S架构（Browser/Server）与C/S架构（Client/Server）是两种主流的架构模式，各自具有独特的优势与适用场景。随着技术的不断发展，B/S架构逐渐取代C/S架构成为主流选择。接下来，我将深入探讨这两种架构，并分析B/S架构为何能够占据主导地位。一、什么是
  • 开源应用驱动企业新质生产力：Websoft9以EPP+AI+知识库助您领跑未来 ai开发
    开源应用驱动企业新质生产力：Websoft9以EPP+AI+知识库助您领跑未来在数字化转型加速的今天，企业新质生产力的核心已从传统资源投入转向技术驱动的效率革命。开源应用凭借其灵活性、成本优势和技术创新力，成为企业实现这一目标的关键引擎。作为开源技术与行业场景化落地的领航者，Websoft9通过企业应用平台（EPP）、AI智能引擎与知识库系统三位一体的解决方案，助力企业快速构建新一代生产力工具，实
  • HarmonyNext实战：基于ArkTS的高性能图像处理应用开发 应用开发
    引言在HarmonyNext生态系统中，图像处理是一个重要且具有挑战性的领域。本文将深入探讨如何利用ArkTS语言开发一个高性能的图像处理应用，重点介绍图像卷积、边缘检测等核心算法的实现。我们将从理论基础出发，逐步构建一个完整的图像处理应用，并通过优化技巧提升性能。图像处理基础1.1图像表示在数字图像处理中，图像通常被表示为一个二维矩阵，每个元素代表一个像素的灰度值或颜色值。在HarmonyNex
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他