广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >HTML5怎么实现base64和图片的互转
  • 623
分享到

HTML5怎么实现base64和图片的互转

html5 2022-10-19 07:10:48 623人浏览 泡泡鱼
摘要

本篇内容主要讲解“HTML5怎么实现base64和图片的互转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5怎么实现base64和图片的互转”吧!

本篇内容主要讲解“HTML5怎么实现base64和图片的互转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习html5怎么实现base64和图片的互转”吧!

刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题

可以减少Http的请求,缺点是不能跨域缓存

代码如下:


<img src="data:image/jpeg;base64,/9j/4QqsRX..." alt="">


然后在线如何把图片转化成base64

如果只依靠单纯的javascript是有权限问题的 js不允许操作本地的file文件或文件夹 为了安全问题

现在html5来了 百度了下有不少资料 中文的也不少 给下w3c的文档 http://www.w3.org/TR/Fileapi/

现在我们用html5的file api里的 readAsDataURL函数 这是一个把文件转化成base64编码的

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
input.setAttribute( 'disabled','disabled' );
} else {
input.addEventListener( 'change',readFile,false );}
}
function readFile(){
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>';
}
}
</script>
</head>
<body>
<input type="file" value="sdgsdg" id="demo_input" />
<textarea id="result" rows=30 cols=300></textarea>
<p id="img_area"></p>
</body>
</html>

到此,相信大家对“HTML5怎么实现base64和图片的互转”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: HTML5怎么实现base64和图片的互转

本文链接: https://www.lsjlt.com/news/77729.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML5怎么实现base64和图片的互转
    本篇内容主要讲解“HTML5怎么实现base64和图片的互转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5怎么实现base64和图片的互转”吧! ...
    99+
    2022-10-19
    html5
  • JS怎么实现将图片URL转base64
    本篇内容主要讲解“JS怎么实现将图片URL转base64”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现将图片URL转base64”吧!背景介绍最近有个需求是将部分DOM生成图片上传到...
    99+
    2023-07-05
  • js中怎么实现file、bolb、base64图片之间的相互转化
    这篇文章主要介绍“js中怎么实现file、bolb、base64图片之间的相互转化”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js中怎么实现file、bolb、base64图片之间的相互转化”文章...
    99+
    2023-06-30
  • 关于JAVA11中图片与BASE64相互转换的实现
    由于jdk 1.8 之后sun.misc 包下的 BASE64Decode的依赖 被移除 我们需要在自己的项目中引入EncodeUtils 工具类 帮助我们进行转换 public...
    99+
    2022-11-12
    JAVA11图片与BASE64转换 JAVA11 图片 BASE64
  • JAVA11中图片与BASE64相互转换的实现方法
    这篇文章主要介绍了JAVA11中图片与BASE64相互转换的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常用的java框架有哪些1.SpringMVC,Spring...
    99+
    2023-06-14
  • webpack图片转为base64的实现示例
    下载url-loader yarn add -D url-loader module: { rules: [ { test: /\.(jpeg...
    99+
    2022-11-12
    webpack图片转为base64 webpack base64
  • 小程序的图片怎么转成base64
    本文小编为大家详细介绍“小程序的图片怎么转成base64”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序的图片怎么转成base64”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。  目前,小程序图片或者本地文...
    99+
    2023-06-26
  • Python实现图像的二进制与base64互转
    目录函数使用1.图像转base64编码2.图像转二进制编码3.图像保存成二进制文件并读取二进制4.二进制转图像5.base64转图像6.互转7.二进制转base648.base64转...
    99+
    2022-11-13
    Python 图像二进制转base64 Python 二进制转base64 Python 二进制 base64
  • Python怎么实现图片和视频的相互转换
    本篇内容主要讲解“Python怎么实现图片和视频的相互转换”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python怎么实现图片和视频的相互转换”吧!使用背景有时候我们需要把很多的图片合成视频,...
    99+
    2023-06-22
  • Java怎么实现bmp和jpeg图片格式互转
    这篇文章主要介绍“Java怎么实现bmp和jpeg图片格式互转”,在日常操作中,相信很多人在Java怎么实现bmp和jpeg图片格式互转问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java怎么实现bmp和j...
    99+
    2023-07-06
  • js怎么实现base64、url和blob之间相互转换
    这篇文章主要讲解了“js怎么实现base64、url和blob之间相互转换”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js怎么实现base64、url和blob之间相互转换”吧!一般来说前...
    99+
    2023-07-06
  • 怎么让chatgpt将html中的图片转为base64
    这篇文章主要介绍“怎么让chatgpt将html中的图片转为base64”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么让chatgpt将html中的图片转为base64”文章能帮助大家解决问题。...
    99+
    2023-07-05
  • html5怎么实现图片的3D旋转效果
    本篇内容主要讲解“html5怎么实现图片的3D旋转效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5怎么实现图片的3D旋转效果”吧!   完整代码如...
    99+
    2022-10-19
    html5
  • Python如何实现图像的二进制与base64互转
    这篇“Python如何实现图像的二进制与base64互转”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python如何实现图...
    99+
    2023-06-29
  • Python实现图片和视频的相互转换
    目录使用背景一、视频转图像二、图像转视频使用背景 有时候我们需要把很多的图片合成视频,或者说自己写一个脚本去加快或者放慢视频; 也有时候需要把视频裁剪成图片,进行后续操作。 这里提供...
    99+
    2022-11-12
    Python图片和视频相互转换 Python图片和视频互转
  • Java实现bmp和jpeg图片格式互转
    目录Bmp转JpegJpeg转BmpBmp转Jpeg public static String bmp2Jpeg(String filePath, String outPath) {...
    99+
    2023-05-15
    Java bmp和jpeg互转 Java bmp jpeg
  • PythonPyMuPDF实现PDF与图片和PPT相互转换
    目录安装与简介MuPDFPyMuPDFPyMuPDF使用元数据页面Page代码示例PDF转图片图片转PDFPDF转PPT文章目录 安装与简介MuPDFPyMuPDF PyMuPDF使...
    99+
    2022-12-23
    Python PyMuPDF Python PDF转图片 Python PDF转PPT
  • Java图片与二进制相互转换怎么实现
    这篇文章主要介绍了Java图片与二进制相互转换怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Java图片与二进制相互转换怎么实现文章都会有所收获,下面我们一起来看看吧。1、下面是一个完整的代码示例指定文...
    99+
    2023-07-05
  • Android怎么实现excel/pdf/word/odt/图片相互转换
    本篇内容主要讲解“Android怎么实现excel/pdf/word/odt/图片相互转换”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android怎么实现excel/pdf/word/odt...
    99+
    2023-07-06
  • html5中svg canvas和图片之间相互转化的方式
    本篇内容介绍了“html5中svg canvas和图片之间相互转化的方式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能...
    99+
    2022-10-19
    html5 svg canvas
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作