harmsworth2016
harmsworth2016

canvas实现压缩图片

canvas实现压缩图片

  • 前言
  • 步骤
  • 代码
  • 参考

前言

上传图片对图片大小有要求，故需要前端压缩图片后再上传。简单的实现效果如下：
您可以点击这里：图片压缩
canvas实现压缩图片_第1张图片

步骤

  • 上传一张图片，进行校验，获取图片文件。
  • 使用 FileReader 的 readAsDataURL 方法将文件转成 base64 字符串，即图片的 url
  • 使用 canvas 的 drawImage 方法绘制图片，toDataURL 方法获取 Data Url，即可以实现压缩图片

代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片压缩title>
head>
<body>
  <input type="file" name="" id="file">
  <input type="button" value="下载" id="download">
  <div>图片压缩比：<span id="ratio">span>div>
  <script>
    const fileEl = document.querySelector('#file')
    const ratioEl = document.querySelector('#ratio')
    const downloadEl = document.querySelector('#download')
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const body = document.body
    // 压缩后的图片url
    let compressUrl = ''
    // 最大上传文件大小
    const MAX_SIZE = 3 * 1024 * 1024
    // 上传文件类型
    const FILE_TYPES = ['image/jpeg', 'image/png']
    // 上传文件最大宽度
    const MAX_WIDTH = 1024
    // 上传文件最大高度
    const MAX_HEIGHT = 1024
    // 上传文件最大宽高比
    const MAX_WH_RATIO = MAX_WIDTH / MAX_HEIGHT
    // 重置
    function resetEl () {
      const imgArr = body.querySelectorAll('img')
      imgArr.forEach(v => {
        body.removeChild(v)
      })
      ratioEl.innerHTML = ''
    }
    // 将文件转成base64
    function convertFile2base64 (file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.addEventListener('load', e => {
          resolve(e.target.result)
          reader = null
        })
        reader.readAsDataURL(file)
      })
    }
    // 压缩图片
    function compress (url, fileType) {
      const img = new Image()
      img.src = url
      body.appendChild(img)
      img.addEventListener('load', e => {
        const {width: originWidth, height: originHeight} = e.target
        // 原始宽高比
        const originWHRatio = originWidth / originHeight
        let targetWidth = originWidth
        let targetHeight = originHeight
        // 1、计算上传图片压缩后的宽高
        // 2、绘制压缩后的图片
        // 3、上传
        if (originWidth > MAX_WIDTH || originHeight > MAX_HEIGHT) {
          if (originWHRatio > MAX_WH_RATIO) {
            // 图片更宽
            targetWidth = MAX_WIDTH
            targetHeight = Math.round(targetWidth / originWHRatio)
          } else {
            // 图片更高
            targetHeight = MAX_HEIGHT
            targetWidth = Math.round(targetHeight * originWHRatio)
          }
        }
        // 图片压缩比
        const ratio = originWidth / targetWidth
        const newImg = document.createElement('img')
        ratioEl.innerHTML = ratio
        canvas.width = targetWidth
        canvas.height = targetHeight
        ctx.clearRect(0, 0, targetWidth, targetHeight)
        // 绘制压缩的图片
        ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
        // 获取 Data Url
        compressUrl = canvas.toDataURL(fileType);
        newImg.src = compressUrl
        newImg.addEventListener('load', () => {
          body.appendChild(newImg)
        })
        // body.appendChild(canvas)
      })
    }
    fileEl.addEventListener('change', e => {
      resetEl()
      const [file] = e.target.files
      if (!file) return
      const {size: fileSize, type: fileType} = file
      console.warn('file', file, fileSize, MAX_SIZE,  fileType);
      if (!FILE_TYPES.includes(fileType)) {
        alert('只能上传图片')
        fileEl.value = ''
        return
      }
      if (fileSize > MAX_SIZE) {
        alert('图片不能超过3M')
        fileEl.value = ''
        return
      }
      convertFile2base64(file).then(res => {
        compress(res, fileType)
      })
    })
    downloadEl.addEventListener('click', e => {
      const a = document.createElement('a')
      a.href = compressUrl
      a.style.display = 'none'
      a.download = '图片'
      body.appendChild(a)
      a.click()
      a.remove()
    })
  script>
body>
html>

参考

https://www.cnblogs.com/goloving/p/8260206.html
https://www.jianshu.com/p/f46195810c3b

你可能感兴趣的:(前端,canvas,图片压缩,图片上传,img)

  • 【现代前端框架中本地图片资源的处理方案】 Gazer_S 前端框架前端缓存javascriptchrome
    现代前端框架中本地图片资源的处理方案前言在前端开发中，正确引用本地图片资源是一个常见但容易被忽视的问题。我们不能像在HTML中那样简单地使用相对路径，因为JavaScript模块中的路径解析规则与HTML不同，且现代构建工具对静态资源有特殊的处理机制。本文将详细探讨在webpack和Vite等构建工具中处理本地图片引用的各种方法。传统方式的局限性在传统开发中，我们可能习惯这样引用图片：constl
  • javaweb将上传的图片保存在项目文件webapp下的upload文件夹下 yuren_xia 后端技术前端技术webappjavatomcateclipse
    前端HTML表单(upload.html)首先，创建一个HTML页面，允许用户选择并上传图片。图片上传上传图片注意：表单的method设置为"post"，enctype需设置成"multipart/form-data"2.后端Servlet(UploadServlet.java)接下来，创建一个Servlet来处理文件上传请求，并将上传的图片保存到webapp/load目录下。packagecom
  • SpringBoot + vue 管理系统 m0_74825565 面试学习路线阿里巴巴springbootvue.js后端
    SpringBoot+vue管理系统文章目录SpringBoot+vue管理系统1、成品效果展示2、项目准备3、项目开发3.1、部门管理3.1.1、前端核心代码3.1.2、后端代码实现3.2、员工管理3.2.1、前端核心代码3.2.2、后端代码实现3.3、班级管理3.3.1、前端核心代码3.3.2、后端代码实现3.4、学生管理3.4.1、前端核心代码3.4.2、后端代码实现3.5、数据统计3.5.
  • 前端开发中的常见问题与疑惑：解析与应对策略 lina_mua javascriptvue.jshtml前端es6
    1.引言1.1前端开发的复杂性前端开发涉及HTML、CSS、JavaScript等多种技术，同时还需要考虑性能优化、跨浏览器兼容性、用户体验等问题。随着前端技术的快速发展，开发者面临的挑战也越来越多。1.2本文的目标本文旨在总结前端开发中常见的问题与疑惑，并提供相应的解决方案和应对策略，帮助开发者更好地应对挑战。2.HTML/CSS常见问题2.1布局问题：如何实现复杂的页面布局？问题描述：实现复杂
  • 国内短剧系统源码部署小程序体验测评讲解 南阳迈特网络科技 短剧源码短剧小程序短剧系统小程序系统架构php
    在移动互联网飞速发展的今天，短剧作为一种新兴的娱乐形式，凭借其短小精悍、内容丰富的特点，迅速赢得了大量用户的青睐。作为一名软件测试人员，我有幸深入体验了一款功能全面、设计精良的短剧小程序。本文将从前端设计、后端功能、用户体验以及服务支持等多个角度，对这款小程序进行详细评测。如果您也感兴趣欢迎点我了解一起探讨一下吧一、前端设计：灵活与美观的完美融合1.运营方自由DIY：个性化定制的极致体验这款小程序
  • 国际数字影像产业园官网：带您探寻文创产业园前沿资讯 树莓集团 科技创业创新
    成都国际数字影像产业园位于成都市金牛区福堤路99号，是数字文创产业的一颗璀璨明珠。该产业园由金牛区政府和树莓科技集团共同打造，拥有诸多独特优势。从产业生态上看，重点发展数字影像、数字文创、数字媒体三大产业，入驻企业超200家。涵盖影视制作、动画设计、游戏开发等多个领域，形成了完整的产业链，从前端采集到后期制作，从内容创作到版权交易，各环节紧密相连。在配套设施与服务方面，商务配套齐全，会议中心、商超
  • React进阶之前端业务Hooks库（五） VillanelleS react.js前端前端框架
    前端业务Hooks库Hooks原理useStateuseEffect上述问题useState,useEffect复用的能力练习：怎样实现一套React过程中的hooks状态&副作用Hooks原理不能在循环中、条件判断、子函数中调用，只能在函数最外层去调用useEffect中，deps为空，执行一次useState使用：import{useState}from'react';constApp=()=
  • Linux查看端口占用情况的几种方式 liu_caihong linux服务器网络
    Linux查看端口占用情况的几种方式概述测试环境为Centos7.9，本文简单给出了几种检测端口的例子。一、查看本机端口占用1、netstat#安装netstatyum-yinstallnet-tools#检测端口占用netstat-npl|grep"端口"[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFUW0j6I-1655191692938)(C:%5CUse
  • 探索React的深度应用：React Survey——构建问卷神器 傅尉艺Maggie
    探索React的深度应用：ReactSurvey——构建问卷神器去发现同类优质开源项目:https://gitcode.com/在浩瀚的前端开发世界里，React与Redux已成为构建复杂Web应用的得力助手，但它们的强大往往隐藏在基础教程之后。今天，让我们一同探索【ReactSurvey】，一个将React与Redux之力发挥至极致的开源项目，教你如何轻松打造专业的在线问卷系统。项目介绍Reac
  • React vs Vue3深度对比与使用场景分析 匹马夕阳 VUE技术集锦react.js前端前端框架
    在前端开发领域，React和Vue3是两个备受瞩目的框架。它们都提供了强大的功能和灵活的开发方式，但各自的设计理念、使用方式和适用场景有所不同。本文将深入探讨React和Vue3的区别，通过代码示例和具体的使用场景，帮助开发者更好地理解并选择适合自己的框架。一、核心概念与设计理念1.ReactReact是由Facebook开发的一个JavaScript库，主要用于构建用户界面。它的核心理念是组件化
  • 一个基于 React + SpringBoot 的在线多功能问卷系统（附源码） 程序员-李旭亮 Java项目源码react.jsspringboot前端
    简介：一个基于React+SpringBoot的在线多功能问卷系统前端技术栈：React、React-Router、Webpack、Antd、Zustand、Echarts、DnDKit后端技术栈：SpringBoot、MySQL、MyBatisPlus、Redis项目源码下载链接：https://pan.quark.cn/s/2e32786e0c61部分页面静态预览：主要前端业务需求与技术突破：
  • Flask——request的form_data_args用法 活动的笑脸 flask框架flaskpython后端
    request中包含了前端发送过来的所有请求数据，在使用前要进行导入request库fromflaskimportFlask,request1.form和data是用来提取请求体数据，通过request.form可以直接提取请求体中的表单格式的数据，是一个类字典的对象，例如：fromflaskimportFlask,requestapp=Flask(__name__)@app.route("/in
  • 微前端无法接入子应用，ip自动重复拼接，无法正确嵌入解决方案 luopeng207663436 前端
    最近在开发过程中，前端接入微应用时一直报错，项目接入了多个子应用，但其中有一个子应用一直报错，主要体现为，访问子应用的路径会自动变成http://ip:port/'http://子应用ip:port'排查很久，发现是由于在子应用配置文件中引号外多加入了一个空格，导致解析失败注意env环境变量中删除所有行尾的空格即可解决问题
  • Vue的单元测试和端到端测试：确保组件可靠性与应用完整性 哎 你看 vuevue.js单元测试前端
    引言在软件开发过程中，测试是保证代码质量和应用稳定性的关键环节。Vue.js作为流行的前端框架，提供了一套完善的测试工具和生态系统，支持开发者进行单元测试和端到端测试。本文将深入探讨如何为Vue组件编写单元测试，并讨论如何使用Cypress等工具进行端到端测试。单元测试1.单元测试的概念单元测试是针对程序中最小的可测试单元进行检查和验证的过程，通常关注函数或方法级别的测试。2.Vue组件的单元测试
  • 深入浅出 Pinia：下一代 Vue 状态管理库的核心实践与设计哲学 斯~内克 vue知识点vue.js前端javascript
    引言：为什么需要状态管理？在现代前端开发中，随着应用复杂度提升，组件间的数据共享和状态管理成为关键挑战。传统的组件间通信（如props/emit）在跨层级组件或大型应用中显得力不从心，而Vue生态早期的Vuex虽然解决了这一问题，但随着TypeScript的普及和CompositionAPI的推出，开发者对状态管理工具提出了更高要求——这便是Pinia诞生的背景。第一部分：Pinia基础概念1.1
  • Vue.js组件开发：从基础到进阶 码上飞扬 vue.js
    在现代前端开发中，Vue.js因其简洁、灵活和易上手的特点，成为了众多开发者首选的框架之一。组件化是Vue.js的核心思想之一，它让我们能够更高效、模块化地开发应用。在本文中，我们将从Vue.js的组件开发的基础知识开始，逐步探索如何通过Vue.js进行高效的组件化开发。一、Vue.js组件的基础Vue.js中的组件可以理解为一个具有特定功能的代码块，它通常包含视图（HTML）、样式（CSS）和逻
  • 现代前端框架渲染机制深度解析：虚拟DOM到编译时优化 桂月二二 前端框架
    引言：前端框架的性能进化论TikTokWeb将React18迁移至Vue3后，点击响应延迟降低42%，内存占用减少35%。Shopify采用Svelte重构核心交互模块，首帧渲染速度提升580%。Discord在Next.js14中启用ReactServerComponents后，服务端数据吞吐量增加240%，客户端Bundle体积减少54%。一、主流框架技术架构差异1.1三大范式运行机制对比维度
  • 常用的HTML标签及属性 微剑 python前端开发htmlcss
    前端开发常用的HTML标签和属性较为丰富，以下是一些常用的HTML标签和属性：1.标题标签：h1、h2、h3、h4、h5、h6；属性：id、class、style2.段落标签：p；属性：id、class、style3.图像标签：img；属性：src、alt、title、width、height、border、align4.超链接标签：a；属性：href、target、title、id、class、
  • Monorepo：前端团队的“中央厨房“革命 lifire_H 前端软件工程
    大家好！今天我要带大家解锁一个让团队协作效率翻倍的神器：Monorepo！准备好迎接代码管理的新世界了吗？一、从"路边摊"到"中央厨房"的进化史传统MultiRepo模式（路边摊）每个项目单独开火做饭：独立仓库、重复配置、依赖版本混乱。想象一下10个摊主各自炒蛋炒饭，连鸡蛋都要分10个篮子装！Monorepo模式（中央厨房）所有菜品共用食材库：统一采购/切配/烹饪。就像米其林餐厅的后厨，所有厨师共
  • freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号 weixin_39970689
    原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的
  • Vue.js 入门指南：从基础到实战 阿绵 前端vue.js前端javascript
    Vue.js是一款流行的渐进式JavaScript框架，广泛用于构建交互式Web界面。它具有简单易学、轻量级、高性能的特点，适合前端新手入门。本文将从Vue的基本概念入手，详细介绍Vue的生命周期及常见用法，帮助你快速上手Vue开发官网：https://cn.vuejs.org/1.Vue.js介绍1.1Vue的特点易学易用：Vue采用直观的模板语法，降低了学习成本响应式数据绑定：使用双向绑定(v
  • JavaScript系列（89）--前端模块化工程详解 一进制ᅟᅠ        ‌‍‎‏  JavaScript前端javascript状态模式
    前端模块化工程详解前端模块化是现代Web开发的核心理念之一，它帮助我们组织和管理日益复杂的前端代码。本文将详细探讨前端模块化工程的各个方面，从基础概念到实际应用。模块化概述小知识：模块化是指将一个复杂的系统分解为独立的、可复用的模块。在前端开发中，模块化有助于提高代码的可维护性、可测试性和可重用性，同时促进团队协作和大型应用的开发。模块化标准与演进//1.CommonJS规范classCommon
  • HTML中 video标签样式铺满全屏 小华0000 css前端
    video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式关键是这个“object-fit:fill”，这样就可以解决了！object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit一般用于img和video标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。fill:默认，不保证
  • fastapi 大型应用_FastApi项目实战 - 爱投票管理系统（一） 赌徒梦 fastapi大型应用
    一、闲来无事，在工作之余自己研究了一下python的异步框架-fastapi，并写包括1、部门管理2、角色管理3、用户管理4、菜单管理5、登录日志6、操作日志7、添加反爬机制六个基础功能模块，演示链接：https://www.lovevote.cn，账号：admin，密码：admin由于我的电脑问题，下载的vue依赖包有几个发生了版本冲突，打包部署后偶尔会在点击菜单按钮时发生前端延时(这时表现为缓
  • python爬虫爬取图片 kanguhong python爬虫开发语言
    """爬取目标：https://pic.netbian.com/彼岸图首页地址：https://pic.netbian.com/4kmeinv/第N页：https://pic.netbian.com/4kmeinv/index_N.htmlhttps://pic.netbian.com/uploads/allimg/240709/194631-1720525591a682.jpg仅供学习，不可用于
  • 阿里巴巴在线图床HTML源码 tupaopao123 程序源码网站源码AEIN墨渊AE博客建站源码网络技术
    介绍：阿里巴巴在线图片上传源码纯单页模板，CSS全部外链化，加快访问速度转载请注明出处AE博客|墨渊»阿里巴巴在线图床HTML源码网盘下载地址：http://kekewl.org/1CUeRcKpHXj图片：
  • springboot + vue 前后端完全分离的博客项目 明日再死 SpringBootvue.jsspringbootrestful
    文章目录前言一、运行截图二、前后台功能前端构架后端架构运行截图总结源码地址前言学完了springboot后，又花了十一天学完了禹神的vue2.x与3.x，一直想找机会练习一下vue来制作单页面前端程序，正巧，B站上看了一位叫markerhub的up主发了这个项目，于是我看了看源码，做了一些改进（源码学习，并非白嫖谢谢）一、运行截图登录界面注册界面找回密码界面二、前后台功能前端构架vue2.xvue
  • 前端学习资料集合 mdnbnb 前端
    针对前端的学习，不同阶段采用的方式是不一样的。本文把前端的学习分为入门、实战、进阶三个阶段。下面分开来说一、入门阶段入门阶段的目标是学会前端的基本语法和知识，能够解决一些简单的问题。这个阶段不建议看书学习，效率太慢。这个阶段不追求知识广度，只要求能够快速上手就行。建议直接找一些介绍前端的基础知识的视频课程来看。推荐一个比较经典的课程。前端基础班就业班实战项目全套课程聊聊前端开发的基础知识4小时带你
  • 单页图床+最新完整版图床系统修复版 专业软件系统开发 源码下载html图床系统源码
    内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件，并生成相应的图片链接，从而方便用户在网页、社交媒体或其他平台上分享图片。功能特点：图片上传：用户可以通过图床系统将本地图片文件上传到服务器上。图片存储：图床系统会将用户上传的图片文件存储在服务器上，确保图片文件的安全性和可靠性。图片链接生成：
  • UnionLLM——通过统一接口调用国内外所有LLM的Python开源工具包 everfly pythongithub
    最近忙里偷闲和公司前端小伙伴一起撸了一个Python开源项目——UnionLLM。这是一个通过与OpenAI兼容的统一方式调用各种国内外各种大语言模型和Agent编排工具的轻量级开源工具包。我们开发它的起因是因为在实际项目中，经常需要调用多个大语言模型的API，但是国内每个大语言模型的接口和参数都不一样，这给我们的工作带来了很大的困扰和额外的成本。UnionLLM的目标是通过统一且容易扩展的方式连
  • 辗转相处求最大公约数 沐刃青蛟 C++漏洞
    无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
  • F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
    一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
  • Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
    本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
  • 初始线程 15700786134
          暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
  • Linux的tcpdump 被触发 tcpdump
    用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
  • 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
    最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
  • 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
    (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
  • gradle上传jar到nexus 矮蛋蛋 gradle
    原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
  • 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
    从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
  • JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
    这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
  • MO、MT解读 bijian1013 GSM
    MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
  • 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
    下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
  • 【Thrift二】Thrift Hello World bit1129 Hello world
    本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
  • 【Avro一】Avro入门 bit1129 入门
    本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
  • 安装nginx+ngx_lua支持WAF防护功能 ronin47
    需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
  • java-5.查找最小的K个元素-使用最大堆 bylijinnan java
    import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
  • TCP的TIME-WAIT bylijinnan socket
    原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
  • jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
       checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
  • Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
    都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
  • websocket dalan_123 websocket
    一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
  • 菜鸟分析网络执法官 dcj3sjt126com 网络
      最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
  • Android相对布局属性全集 dcj3sjt126com android
    RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
  • Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
    Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
  • Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
    Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
  • weblogic创建JMC i5land weblogicjms
    进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
  • 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
    上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
  • sql添加、删除表中的列 macroli sql
    添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
  • PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
    <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
  • hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
    一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
  • Spring Boot 1.2.4 发布 wiselyman spring boot
    Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他