js将图片转换成base64

之前有个需求是把页面绘制成图片，上传到服务器中，我使用的 html2canvas 。但是html页面当中含有图片，如果图片地址非本页面域名，在截图时就会存在跨域问题，导致截图失败。经过多方查找，发现把页面中的图片转换成base64，可以避免这个跨域问题。

JS处理base64

var strImage = strToReplace.replace(/^data:image\/[a-z]+;base64,/, "");

处理base64去掉data:image/jpeg;base64,这些内容,，得以让后台识别，否则后台是不识别的。

外链图片使用请求的方式

本方法也只适用于同源请求，比如当我使用localhost请求http://static.wubin的时候，就会提示跨域的错误

跨域请求产生错误的原因及处理方法：https://www.wubin.work/blog/articles/316

基本上这种方法只用在同源的情况下吧！

function getBase64(imgUrl) {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        if(this.status == 200){
            //得到一个blob对象
            var blob = this.response;
            console.log("blob", blob)
            // 至关重要
            let oFileReader = new FileReader();
            oFileReader.onloadend = function(e){
                // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
                console.log(e.target.result)
            }
            oFileReader.readAsDataURL(blob);
        }
    }
    xhr.send();
}

可以简单更改下，改为promise:

function getImageBase64(imgUrl) {
        return new Promise((resolve, reject) => {
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            xhr.responseType = "blob";
            xhr.onload = function(){
                if(this.status == 200){
                    //得到一个blob对象
                    var blob = this.response;
                    console.log("blob", blob)
                    // 至关重要
                    let oFileReader = new FileReader();
                    oFileReader.onloadend = function(e){
                        // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
                        console.log(e.target.result);
                        resolve(e.target.result);
                    }
                    oFileReader.readAsDataURL(blob);
                }
            }
            xhr.send();
        });
    }

使用的时候：

const imgBase64 = await getImageBase64(image.src);

不要忘记，await要配合async~~

使用canvas

这种方式也不能实现跨域转化：

根据图片路径获取base64编码
/**
*
* @param url 图片路径
* @param ext 图片格式
* @param callback 结果回调
*/
function getUrlBase64(url, ext, callback) {
    var canvas = document.createElement("canvas"); //创建canvas DOM元素
    var ctx = canvas.getContext("2d");
    var img = new Image;
    img.crossOrigin = 'Anonymous';
    img.src = url;
    img.onload = function () {
        //指定画板的高度,自定义，推荐使用img加载后的实际宽度
        canvas.height = 60;
        //指定画板的宽度，自定义, 推荐使用img加载后的实际宽度
        canvas.width = 85; 
        ctx.drawImage(img, 0, 0, 60, 85); //参数可自定义
        var dataURL = canvas.toDataURL("image/" + ext);
        callback.call(this, dataURL); //回掉函数获取Base64编码
        canvas = null;
    };
}

// 使用
getUrlBase64(path, ext, function (base64) {
    console.log(base64);//base64编码值
});

最最通用的方法，使用后端进行代理

使用这种方法，可以无视任何跨域的问题，但是需要发送请求~

配合axios插件：

function getImageBase64(imgsrc) {
    const GET_BASE64 = 'http://m.qdxin.cn/appc/getbase64.php';
    const URL = `${GET_BASE64}?url=${imgsrc}`;
    return axios.get(URL).then((res) => {
        const serverData = res.data;
        if (serverData.error == 0) {
          return serverData.data;
        } else {
          return false;
        }
      }).catch((err) => {
        // 请求失败
        console.log(err);
        // window.alert('抱歉，数据请求失败，请稍候重试');
        return false;
      });
}

后端转换图片PHP：

<?php
header("Access-Control-Allow-Origin: *");
header("content:application/json;chartset=uft-8");
/**
 * 将传入图片地址转化为base64
 */
class ImgToBase64
{
    public $url;
    public $base64;

    function __construct($url)
    {
        $this->url = $url;

        $this->checkUrl() && $this->tobase64();

    }

    private function checkUrl()
    {
        $pattern = '/http[s]?:\/\/[\w\d.\/-]+\.(jpg|png|gif)/i';
        preg_match($pattern, $this->url, $match);
        if (!isset($match[0])) {
            $this->showError();
            return false;
        }
        $this->url = $match[0];
        return true;
    }

    private function tobase64()
    {
         $imageInfo = @getimagesize($this->url);
         if (!$imageInfo) {
             $this->showError();
             return;
         }
         $base64 = base64_encode(file_get_contents($this->url));
         // 在每个字符后分割一次字符串
         $base64 = chunk_split($base64);
         $blob = 'data:' . $imageInfo['mime'] . ';base64,';
         $this->base64 = $blob . $base64;
    }

    private function showError()
    {
        $this->base64 = false;
    }

    public function getBase64()
    {
        return $this->base64;
    }

}

// $img = 'http://statics.qdxin.cn/uploadfile/2020/1212/20201212100223404.jpg';

$img_url = isset($_GET['url']) ? $_GET['url'] : false;
// 先检测url中是否含有http或者https，如果没有添加http
if (strpos($img_url, 'http') === false) {
    $img_url = 'http:' . $img_url;
}
 
$res = array(
    'error' => 1,
    'data' => false
);

// 如果是一个有效图片
if (@getimagesize($img_url)) {
    $base64 = new ImgToBase64($img_url);
    $img_base64 = $base64->getBase64();
    // var_dump($img_base64);
    (boolean)$img_base64 && $res = array(
        'error' => 0,
        'data' => $img_base64
    );
}
$json = json_encode($res);
exit($json);

?>

推荐个自己的转换地址：http://api.wubin.work/tool/img2base64?url=填入图片的链接

以及工具链接：http://tool.wubin.work/img2base64

本地图片转base64

<!DOCTYPE html>
<html>
<head>
    <title>本地图片转base64</title>
</head>
<body>
    <input type="file" id="imgfile" method="post" enctype="multipart/form-data">
    <button type="button" onClick="ToBase64();">点我</button>
</body>
    <script type="text/javascript">
        function ToBase64() {
            // debugger
            /*转换base64*/
            var img = document.getElementById('imgfile')
            var imgFile = new FileReader();
            imgFile.readAsDataURL(img.files[0]);
        
            imgFile.onload = function () {
                var imgData = this.result; //base64数据  
                console.log(imgData);
            }
        }
    </script>
</html>