js中图片二进制和base64的互转
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>正常图片</p> <p></p> <img src="132.jpg" /> <p></p> <p>base64</p> <p></p> <img src="" id="base64" alt="" /> <p></p> <p></p> <p>base64转为二进制</p> <img src="" id="erjinz" alt="" /> </body> <script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /** * 网络图像文件转Base64 */ 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; } /** *Base64字符串转二进制 */ function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } //**blob to dataURL** function blobToDataURL(blob, callback) { var a = new FileReader(); a.onload = function(e) { callback(e.target.result); } a.readAsDataURL(blob); return a; } var result; var img = "132.jpg"; var image = new Image(); image.src = img; image.onload = function() { //这样就获取到了文件的Base64字符串 var base64 = getBase64Image(image); $("#base64").attr("src", base64); //Base64字符串转二进制 var file = dataURLtoBlob(base64); //二进制转base64 result = blobToDataURL(file, function(dataurl) { console.log(dataurl); }); setTimeout(function() { $("#erjinz").attr("src", result.result); }, 100); } </script> </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?