技術標籤：JSjsbase64

方法：圖片轉成canvas，從而得到圖片的base64碼

    <div class="box">
        <div>
            <div>
                圖片:
            </div>
            <img src="./img/pie.svg" alt="" id="pie" class="imgs">
        </div
 
>
        <button id="btn">副本生成=></button>
        <div>
            <div>
                圖片(副本):
            </div>
            <div id="wrap">
            </div>
        </div>
    </div>
    <br/>
    <div>
        <
 
div>圖片Base64資料：</div>
        <textarea id="dataImg" rows="10" cols="100"></textarea>
    </div>

<script>
    var btn = document.getElementById("btn");
    var dataImg = document.getElementById("dataImg")
    btn.addEventListener
 
("click", clickHandler);
    //核心程式碼
    function getBase64Img(img) {
        let cans = document.createElement("canvas");
        cans.width = img.width;
        cans.height = img.height;
        let ctx = cans.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        let dataURL = cans.toDataURL("image/png");
        return dataURL;
    }
    // 
    function clickHandler() {
        console.log("點選！")
        var img = document.getElementById("pie");
        var wrap = document.getElementById("wrap");
        var data = getBase64Img(img);
        console.log("base64資料：", data)
        dataImg.value=data;
        var imgCopy = document.createElement("img");
        imgCopy.src = data;
        wrap.appendChild(imgCopy);
    }

</script>

效果圖

demo下載