js 将图片文件转换成base64

1.情景展示

  在JavaScript中,如何使用图片文件转换成base64?

2.解决方案

/**
 * 网络图像文件转Base64
 * @param img dom对象
 */
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
}

3.测试

window.onload = function(){
    // 获取图片对象
    var imgDom = document.getElementById(‘bb‘);
    var dataUrl = getBase64Image(imgDom);
    alert(dataUrl);
}

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

相关推荐:

原文地址:https://www.cnblogs.com/Marydon20170307/p/10718563.html

时间: 2024-07-28 18:57:36

js 将图片文件转换成base64的相关文章

js如何将选中图片文件转换成Base64字符串?

如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传文件都是在web页面端通过表单直接提交,再由服务器端捕获请求来进行处理的.但是在前后端分离趋于一种流行趋势,再加上Android和iOS开发技术日渐成熟, 大部分团队都会选择在服务器端仅提供一套通用的webservice数据接口,而web页面.Android和iOS统一都通过这套数据接口来向服务器发送请求和获

将input type="file" 类型的图片文件转成base64

带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数. <div> <input type="file" id="imgTest" type="file" onchange="imgChange(event)&quo

net9:图片文件转换成二进制流存入SQL数据库,以及从数据库中读取二进制流输出文件

原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebContro

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

delphi将图片转换成Base64编码函数

{************************************************************************** 名称: BaseImage 参数: fn: TFilename 返回值: string 功能: 将fn文件转换成Base64编码,返回值为编码 **************************************************************************} function BaseImage(fn: str

js绝对地址图片转换成base64的方法

//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); //为了解决跨域,可以直接img.crossOrigin=''就能解决图片跨域问题 img.crossOrigin = 'xes'; img.onload = function(){ canvas

怎样将PDF文件转换成jpg图片的方法

有些情况下需要将文档内容转为图片进行保存.与PDF文件一样,jpg格式的图片是一种与平台无关的通用的图片格式.适合用来传输和存储.所以一般将PDF转换成的图片都是jpg格式的. 虽然一般截图也是jpg格式的,但是通过截图的方式来将PDF文档的页面一个个转换成图片是需要用更多的时间的,而且图片质量难以保证.页面较大的文档截取的图片可能会使图片内容不清晰. 通过pdf转换成jpg软件来将文件转换成图片也是一种较好的方法.转换的图片与原文档的页面大小相同,并且输出的图片是jpg格式的. 用转换工具转换

将pdf文件转换成jpg图片

平时办公中经常会用PDF格式传递一些文档资料,PDF格式虽然可以在很多平台中打开,但是也是需要安装对应的阅读工具,而有些时候文档信息是需要用图片的方式进行发送的,那么如果要把PDF文件转换成图片的该怎么操作呢? 处理PDF文件的格式转换一般都是用PDF转换工具来操作的,转换成图片也是可以的.用转换工具将PDF文件转换成的图片是jpg格式,图片的的大小和PDF文件的每个页面大小是等比例的. 打开转换工具后在PDF转换成其他文件选项中选择文件转图片.接着将要转换成图片的文件添加到转换器中,对于加密文

按比例压缩图片和图片转换成BASE64

通常会需要将突破转换为字符串的操作,贴此详例,仅供参考和积累 #region 按比例压缩图片和图片转换成BASE64 /// <summary> /// 按照比例缩小图片 /// </summary> /// <param name="srcImage">要缩小的图片</param> /// <param name="percent">缩小比例</param> /// <returns&g