js小工具---本地图片转换为base64编码数据
今天用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编码数据的更多相关文章
- js 图片转换为base64
<input id="file" type="file"> <img id="img" style="max-h ...
- 将图片转换为base64 格式
1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...
- JAVA 将图片转换为Base64编码
这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...
- C# 图片转换为base64
WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...
- 【PHP】图片转换为base64,经过post传输后‘+’会变成 ‘空格’
图片转换为base64,经过post传输后‘+’会变成 ‘空格’, 需要用PHP 处理一下 $str= $_POST['img_data']; $str= str_replace(' ','+',$s ...
- C# Base64字符串转换成图片及图片转换为Base64
最近有朋友经常会问我一些问题,例如,如何把一个字符串转换成base64字符串,如何把一个二进制文件转换成Base64文件,以及如何转换回原有的文件,在此我把方法写一下 字符串与Base64相互转换 ...
- 将图片转换为Base64编码的字符串
图片以文件的形式存在,可以在表单中使用. 也可以转换成Base64编码的字符串,从而在css.js中以字符串的形式使用图片.例如,在css中设置背景图片.在js中用ajax上传图片. <!DOC ...
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
- 本地图片转base64编码
通常获取图片的base64编码都是通过input的上传file属性获取转化,但是有时候需要的是本地图片不经过上传操作,直接拿本地图片转成base64编码就不行了,input上传操作需要人为操作一下,没 ...
随机推荐
- C#,C++Dll文件调用心得
C#下: 1.新建-->项目-->控制台应用程序:填写各种名称之后项目新建成功:一下为默认生成方式. 2.如下,在Program.cs中添加如下代码: using System;using ...
- URL中?和#的区别(关于SSRF)以及mysql的secure-file-priv
零,绪论 20180125日,忙! 瞎比比总结一下,来满足这是个日记的样子. 1.今天谈的并不是什么技术[当然也不是没有技术(都很基础)]而是瞎几把扯. 一.关于一种SSRF的检测绕过: 1.背景: ...
- 【BZOJ2879】[Noi2012]美食节 动态加边网络流
[BZOJ2879][Noi2012]美食节 Description CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食 ...
- 【BZOJ1486】[HNOI2009]最小圈 分数规划
[BZOJ1486][HNOI2009]最小圈 Description Input Output Sample Input 4 5 1 2 5 2 3 5 3 1 5 2 4 3 4 1 3 Samp ...
- Android 获取当前应用的版本号和当前系统的版本号
1.获取当前程序版本名 我们可以在AndroidManifest.xml中设置程序的版本号等,如android:versionName="1.0",那如果想在代码中获取这个版本号呢 ...
- 170427、centos6.5配置duboo
IP: 192.168.0.111 部署容器:apache-tomcat-7.0.57 端口:8080 1. 下载最新版的 Tomcat7: $wget http://mirrors.hust.edu ...
- HDU 2157 How many ways??(简单线性DP | | 矩阵快速幂)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2157 这道题目很多人的题解都是矩阵快速幂写的,矩阵快速幂倒是麻烦了许多了.先给DP的方法 dp[i][ ...
- Web测试系列之测试工具
一Web功能测试工具MAXQ MAXQ是开源的Web功能测试工具. MAXQ是开源的Web功能测试工具.他的特点:1)简单易学;2)是一个轻量级的Web功能测试工具;3)可以自动录制WebBrowse ...
- Python overall structer
在C/C++/Java中,main是程序执行的起点,Python中,也有类似的运行机制,但方式却截然不同:Python使用缩进对齐组织代码的执行,所有没有缩进的代码(非函数定义和类定义),都会在载入时 ...
- Spark源码分析 – 汇总索引
http://jerryshao.me/categories.html#architecture-ref http://blog.csdn.net/pelick/article/details/172 ...