今天用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. Effective C++ Item 9 Never call virtual functions during constrution or destruction

    Because such calls would never go to a more derived class than that of currently executing construto ...

  2. 剑指 offer set 26 不用加减乘除做加法

    总结 1. Leetcode 上有一道题, 是不用乘除做乘法, 那道题算是背包问题的变形 2. 不用加减乘除, 还可以用移位操作 3. 将数字转成二进制格式, 然后运用二进制亦或, 移位运算解决 3. ...

  3. SQL Server计算列

    计算列由可以使用同一表中的其他列的表达式计算得来.表达式可以是非计算列的列名.常量.函数,也可以是用一个或多个运算符连接的上述元素的任意组合.表达式不能为子查询. 例如,在 AdventureWork ...

  4. js修改剪切板内容的方法

    代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...

  5. 进击的RecyclerView入门二(来点小装饰?)

    接着上一讲,我们看到我们的Demo可以正常的运行,并且能自动加载网络图片,那么为了后面观察的方便,我们取消这种自动加载的功能,使用两个按钮来代替,分别用来增加一个数据和减少一个数据.截图如下: 正在我 ...

  6. web测试点--摘录

    转载地址:Web测试到底是在测什么 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&am ...

  7. [iPhone硬件]-GPS定位的使用

    iPhone中GPS定位如何使用 关键词 1.info.plist配置授权描述 2.引入库 3.CLLocationManager的使用 info.plist配置 在info.plist中根据情况加入 ...

  8. csv的文件excel打开长数字后面位变0的解决方法

    对于有大数字的CSV文件,应使用导入,而不是打开.这里以Excel2010为例,其它版本也可以参照: 打开Excel,此时Excel内为空白文档 点击工具栏中的[数据]→[自文本] 在“导入文本文件” ...

  9. 你应该知道的vim插件之surround.vim

    写代码的时候你会发现这个插件是多么有用! 强烈推荐! 0×01.change 123456 cs"' cs"<q> cs)] cst<p> csw' csW ...

  10. 008-mac下apache tomcat 测试授权

    一.下载 下载合适版本即可zip包 2.对bin下的*.sh授权 chmod 755 *.sh 3.80端口 https://blog.csdn.net/ilovesmj/article/detail ...