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

目录

        • 内容介绍
        • 一、对ASCII码进行base64编码
        • 二、对非ASCII码进行base64编码
        • 三、对图片进行base64编码
          • 1、本地图片
          • 2、网络图片

内容介绍

  使用js对ASCII码进行base64编码,对非ASCII码进行base64编码,对图片进行base64编码(含网络图片跨域问题)。

一、对ASCII码进行base64编码

// 对ASCII码进行base64编码
const result = btoa("this is a code") // 编码
console.log("编码:", result)
console.log("解码:", atob(result)); // 解码

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

二、对非ASCII码进行base64编码

// 对非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));

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

三、对图片进行base64编码

1、本地图片

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转base64title>
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、网络图片

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转base64title>
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...
使用javascript对ASCII、非ASCII和图片进行base64编码(本地图片和网络图片)_第3张图片

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

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

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

标签:base64,toDataURL,JavaScript


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


欢迎评论留言!

你可能感兴趣的:(#,JavaScript,other,base64,javascript)