本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359

1.根据img标签获取base64编码
/**
*
* @param img html的img标签
* @param ext 图片格式
* @returns {string}
*/
function getImageBase64(img, ext) {
var canvas = document.createElement("canvas"); //创建canvas DOM元素,并设置其宽高和图片一样
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式
canvas = null; //释放
return dataURL;
}

使用
var user_icon = document.getElementById('icon');
user_icon.src = img_path; //指定图片路径
user_icon.onload = function () {
base64 = getImageBase64(user_icon, fileExt); //base64编码
}

2.根据图片路径获取base64编码
/**
*
* @param url 图片路径
* @param ext 图片格式
* @param callback 结果回调
*/
function getUrlBase64(url, ext, callback) {
var canvas = document.createElement("canvas"); //创建canvas DOM元素
var ctx = canvas.getContext("2d");
var img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
canvas.height = 60; //指定画板的高度,自定义
canvas.width = 85; //指定画板的宽度,自定义
ctx.drawImage(img, 0, 0, 60, 85); //参数可自定义
var dataURL = canvas.toDataURL("image/" + ext);
callback.call(this, dataURL); //回掉函数获取Base64编码
canvas = null;
};
}

使用
getUrlBase64(path, ext, function (base64) {
console.log(base64);//base64编码值
});

[转]JS将图片转为base64编码的更多相关文章

  1. js将图片转为base64编码,以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  2. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Asp.net将图片转为Base64编码

    protected void Page_Load(object sender, EventArgs e) { Image img = new Bitmap(Server.MapPath("/ ...

  5. python将图片转为base64编码

    import base64 f = open("m1.jpg", "rb") res = f.read() s = base64.b64encode(res) ...

  6. JS将图片转为base64

    var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...

  7. 字符串与图片的Base64编码转换操作

    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...

  8. C#中图片转换为Base64编码,Base64编码转换为图片

    #region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = ...

  9. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

随机推荐

  1. MongoDB(八):索引

    1. 索引 索引支持查询的有效地提高效率.没有索引,MongoDB必须扫描集合的每个文档,以选择与查询语句匹配的文档.这种扫描效率很低,需要MongoDB处理大量的数据. 索引是特殊的数据结构,以易于 ...

  2. 28.web8

    file_get_contents()文件包含漏洞,根据题目提示txt?尝试flag.txt payload:  ?ac=flags&fn=flag.txt

  3. Python定做一个计算器,小而美哒~

    使用qt designer ,按装anaconda后,在如下路径找到: conda3.05\Library\bin designer.exe文件,双击启动: ​ 创建窗体,命名为XiaoDing,整个 ...

  4. Key Management: Hardcoded Encryption key 密钥管理:硬编码加密密钥

  5. Ant Design 错误记录

    Ant Design 错误记录 一: 标签页Tabs 1:设置activeKey或defaultActiveKey,绑定默认值不起作用: =>    需要同时设置activeKey和defaul ...

  6. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  7. 学习 C#,从 Hello world 开始吧

    目录 Hello world 创建.编辑.编译和运行 C# 源代码 使用 .NET Core 命令行接口 (CLI) 工具 使用 Visual Studio 创建项目 编译和执行 总结 C#(读作 & ...

  8. 如何将pyqt5的qt-designer设计出来的 .ui 和 .qrc 文件转化成 .py 文件

    一.pyrcc5的使用 1.1 作用 将 .qrc 资源文件转换成py文件,并在主程序中通过 import 引入 1.2 资源文件编写说明 创建一个icon.qrc,代码如下: <RCC> ...

  9. openstack_dashboard无法获取nova

    问题描述: 今天打开openstack的dashboard准备创建实例,结果计算节点每一项展开都无法获取nova 之前已经把nova搞好了并没有什么问题,怎么突然就服务也起不了了 查看了一下nova服 ...

  10. 强大的django-debug-toolbar,django项目性能分析工具

    强大的django-debug-toolbar,django项目性能分析工具 给大家介绍一个用于django中debug模式下查看网站性能等其他信息的插件django-debug-toolbar 首先 ...