当前位置：网站首页>JS image path conversion Base64 format

JS image path conversion Base64 format

2022-07-01 04:17:00 【-Geng Rui-】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = 'app'>

    </div>
    <script> let url = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659174217&t=2fd6120db3cd74070561b7e1e112d0e7"; function getBase64(imgUrl) {
       window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); //  crucial  xhr.responseType = "blob"; xhr.onload = function () {
       if (this.status == 200) {
       // Get one blob object  var blob = this.response; //  crucial  let oFileReader = new FileReader(); oFileReader.onloadend = function (e) {
       let base64 = e.target.result; console.log(base64) }; oFileReader.readAsDataURL(blob); //==== To display pictures on the page , You can delete ==== } } xhr.send(); } getBase64(url); </script>
</body>
</html>

The operation results are as follows
Insert picture description here
In this way, we will successfully convert the path to base64 Format base64 The path of can be used directly by putting it directly into the image path
The color code is as follows 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = 'app'>

    </div>
    <script> let url = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659174217&t=2fd6120db3cd74070561b7e1e112d0e7"; function getBase64(imgUrl) {
       window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); //  crucial  xhr.responseType = "blob"; xhr.onload = function () {
       if (this.status == 200) {
       // Get one blob object  var blob = this.response; //  crucial  let oFileReader = new FileReader(); oFileReader.onloadend = function (e) {
       let base64 = e.target.result; console.log(base64) document.getElementById('app').innerHTML = `<img src = ${
        base64} />`; }; oFileReader.readAsDataURL(blob); //==== To display pictures on the page , You can delete ==== } } xhr.send(); } getBase64(url); </script>
</body>
</html>

Insert picture description here
It's also very simple The main base64 Easy back-end processing It also has advantages in running speed

原网站

版权声明
本文为[-Geng Rui-]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207010413026359.html

边栏推荐

猜你喜欢

随机推荐