js 图片转base64-蒲公英云

js 图片转base64

function getImgSrc(id) {
        return $('#' + id).attr("src");
    }
/**
*scr  为图片的路径
*/
function getImgBase64(scr){
    var img = new Image();
    img.src=scr;
    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;
}

demo

目录结构:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTUzMDY5NQ_size_16_color_FFFFFF_t_70

demo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jquery-3.1.1.min.js" > </script>
        <script src="../js/demo.js" > </script>
    </head>
    <body>
        <img id="img_id" style="height: 100px;" src="../img/a.png">
        <hr/>
        <button style="width: 100px;background-color: aquamarine;" onclick="printImgCode()">测试</button>
    </body>
</html>

demo.js

function getImgSrc(id) {
        return $('#' + id).attr("src");
    }
    /**
    *scr  为图片的路径
    */
    function getImgBase64(scr){
        var img = new Image();
        img.src=scr;
        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;
    }
    function printImgCode(){
        var scr = getImgSrc("img_id");
        var dataURL =  getImgBase64(scr);
        alert(dataURL);
    }