使用javascript对ASCII、非ASCII和图片进行base64编码(本地图片和网络图片)

人间小美味695

已于 2022-11-19 21:58:13 修改

阅读量876

点赞数 9

分类专栏： # JavaScript # other 文章标签： base64 javascript

于 2021-04-29 09:38:32 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/116229617

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

other

11 篇文章 1 订阅

订阅专栏

// 对非ASCII码进行base64编码
function encodeB64(str) {
    return btoa(encodeURIComponent(str)); // 编码
}

function decodeB64(str) {
    return decodeURIComponent(atob(str)); // 解码
}
let bResult = encodeB64('代码测试');
console.log("编码：\n", bResult);
console.log("解码：\n", decodeB64(bResult));

非ASCII码编码效果

三、对图片进行base64编码

1、本地图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转base64</title>
</head>

<body>

    <img src="./image/本地上传.png" alt="加载图片" id="img">
    <script>
        let img = document.getElementById("img");
        let base64 = "";
        let newImg = new Image();

        function imageToBase64(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 dataURL = canvas.toDataURL("image/png");
            return dataURL;
        }

        img.onload = function(e) {
            let base64 = imageToBase64(e.target);
            console.log(base64);
        }
    </script>
</body>

</html>

2、网络图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转base64</title>
</head>

<body>

    <img src="https://img-blog.csdnimg.cn/20210422141606715.jpg" alt="加载图片" id="img">
    <script>
        let img = document.getElementById("img");
        let base64 = "";
        let newImg = new Image();

        function imageToBase64(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 dataURL = canvas.toDataURL("image/png");
            return dataURL;
        }

        img.onload = function(e) {
            let base64 = imageToBase64(e.target);
            console.log(base64);
        }
    </script>
</body>

</html>

控制台报错：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no...
在这里插入图片描述

由于跨域问题，canvas画布被污染，无法执行toDataURL方法提取相关数据。

解决方法：img设置crossOrigin属性为Anonymous

img.setAttribute("crossOrigin", "Anonymous");

四、happy一下

在这里插入图片描述

标签：base64，toDataURL，JavaScript

更多演示案例，查看 案例演示

欢迎评论留言!

人间小美味695

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
21
评论
使用javascript对ASCII、非ASCII和图片进行base64编码(本地图片和网络图片)

使用js对ASCII码进行base64编码，对非ASCII码进行base64编码，对图片进行base64编码（含网络图片跨域问题）
复制链接

扫一扫