今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据。所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用。

效果:

js代码如下:

    <!DOCTYPE> # 这是将代码复制到一个文件后命名为html格式文件后用浏览器打开即可使用小工具转换
<input type="file" id="img">
<br/>
<button id="start">开始转换</button>
<div>
预览:<img id="imgShow" src="" alt="">
</div>
<b>Base64数据:</b>
<textarea rows=15 cols=60 id="conte"></textarea>
<button id='cpData'>复制</button><span id="succ"></span>
<div id="len">数据长度:</div>
<script>
var img = document.getElementById('img')
, imgShow = document.getElementById('imgShow')
, conte = document.getElementById('conte')
, len = document.getElementById('len')
, start = document.getElementById('start')
, cpData = document.getElementById('cpData'); cpData.addEventListener('click', cpDataF);
start.addEventListener('click', startt); /*转换函数*/
function startt() {
var imgFile = new FileReader();
imgFile.readAsDataURL(img.files[0]);
imgFile.onload = function () {
var imgData = this.result; //base64数据
imgShow.setAttribute('src', imgData);
conte.value = imgData;
len.innerHTML += imgData.length;
}
} /*复制数据*/
function cpDataF() {
conte.select(); // 选择对象
var cpd=document.execCommand("Copy"); // 执行浏览器复制命令
cpd ? document.getElementById('succ').innerHTML = '复制成功' : console.warn('复制失败');
window.setTimeout(function () {
document.getElementById('succ').innerHTML = '';
}, 1000)
}
</script>

js小工具---本地图片转换为base64编码数据的更多相关文章

  1. js 图片转换为base64

    <input id="file" type="file"> <img id="img" style="max-h ...

  2. 将图片转换为base64 格式

    1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...

  3. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  4. C# 图片转换为base64

    WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...

  5. 【PHP】图片转换为base64,经过post传输后‘+’会变成 ‘空格’

    图片转换为base64,经过post传输后‘+’会变成 ‘空格’, 需要用PHP 处理一下 $str= $_POST['img_data']; $str= str_replace(' ','+',$s ...

  6. C# Base64字符串转换成图片及图片转换为Base64

    最近有朋友经常会问我一些问题,例如,如何把一个字符串转换成base64字符串,如何把一个二进制文件转换成Base64文件,以及如何转换回原有的文件,在此我把方法写一下   字符串与Base64相互转换 ...

  7. 将图片转换为Base64编码的字符串

    图片以文件的形式存在,可以在表单中使用. 也可以转换成Base64编码的字符串,从而在css.js中以字符串的形式使用图片.例如,在css中设置背景图片.在js中用ajax上传图片. <!DOC ...

  8. 图片上传-本地图片转base64+ie8支持+本地预览支持

    最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...

  9. 本地图片转base64编码

    通常获取图片的base64编码都是通过input的上传file属性获取转化,但是有时候需要的是本地图片不经过上传操作,直接拿本地图片转成base64编码就不行了,input上传操作需要人为操作一下,没 ...

随机推荐

  1. 如何用C语言读写文件

    #include "stdio.h"#include <stdlib.h> main(){ FILE *fp1;//定义文件流指针,用于打开读取的文件 FILE *fp ...

  2. ubuntu 12.04中环境变量设置

    Persistent environment variables So far we've only discussed ways set an environment variable value ...

  3. 13个非常实用的JavaScript小技巧

    使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...

  4. CentOS7 minimal下MySQL安装

    http://www.linuxidc.com/Linux/2016-12/137942.htm 首先要使用root用户登录 卸载: 1.卸载原有程序 yum remove mysql mysql-s ...

  5. ES6数组相关

    ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...

  6. [Chrome] 如何下载老版本的 Chrome

    Google 官方只提供了最新版的 Chrome, 在旧版本的系统(如:Ubuntu 12.04 LTS)安装不上 这里提供了 Chrome 的历史版本下载 备注:Ubuntu 12.04 LTS 可 ...

  7. 170419、Centos7下完美安装并配置mysql5.6

    首先跟各位说声抱歉,原计划说每天一篇博文,最近由于实在太忙,封闭式开发一个项目,没有时间写博文,望大家见谅!!! 由于公司要搭建分布式服务,我把最近我所用到或者学习的技术或者遇到的问题跟大家分享一下! ...

  8. 适配器模式(Adpater)

    一.适配器模式介绍 适配器模式:将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的类可以一起工作. 例如: NBA中的球员来自不同国家,而世界标准语言 ...

  9. Entity Framework 项目使用心得

    在博客园很久了,一直只看不说,这是发布本人的第一个博客. 总结一下在项目中,EntityFramework使用的一下经验拿来和大家分享,希望对大家有用~ 1.         在Entity Fram ...

  10. d3.js:数据可视化利器之快速入门

    hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...