本地路径图片转base64（非input-file）

通常获取图片的base64编码都是通过input的上传file属性获取转化，但是有时候需要的是本地图片不经过上传操作，直接拿本地图片转成base64编码就不行了，input上传操作需要人为操作一下，没有认为操作拿到的只是图片路径，现在可以通过canvas的toDataURL属性来将本地图片直接转换成base64编码形式，如下方法直接可以用：

<!--
 * @Description: 
 * @Author: NanKe
 * @Date: 2022-03-02 20:44:00
 * @LastEditTime: 2022-03-02 20:56:23
 * @LastEditors: NanKe
 * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/
 * @FilePath: \新建文件夹\ddd.html
-->


<!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>本地图片转base64编码</title>
</head>

<body>
    <script>
        function changeBase64(url) {
            var imgSrc = url; // 图片本地路劲
            var image = new Image()
            image.setAttribute("crossOrigin",'Anonymous')
            image.src = imgSrc
            image.onload = () => {
                var canvas = document.createElement("canvas")
                canvas.width = image.width
                canvas.height = image.height
                var ctx = canvas.getContext("2d")
                ctx.drawImage(image, 0, 0, image.width, image.height)
                var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase()
                var dataUrl = canvas.toDataURL("image/" + ext)
                var base64 = JSON.parse(JSON.stringify(dataUrl)) // 这里就是转化成的编码
                console.log(base64);
            }
        }
        changeBase64('./头像-男学生1.png')
    </script>
</body>

</html>