將頁面上的圖像轉換為base64

Question

我的頁面上加載了一張圖片，我需要將其轉換為base64。 我目前正在使用以下內容：

    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("additem_img");
    ctx.drawImage(img, 10, 10);
    console.log(c.toDataURL());

這是我在另一個StackOverflow問題中發現的。 似乎創建了base64字符串

數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm / 9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgI DB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlAABg + UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw / QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC

但是，當我嘗試使用每個在線解碼器對此進行解碼時，我一無所獲。 “ additem_img”元素是圖像，其來源是來自遠程網頁的圖像。 我想使用canvas和base64創建本地副本。

Answer 1

嘗試這個：

<img id="additem_img" src="image.png">

<script>
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");

    var img = document.getElementById("additem_img");
    var w = img.width;
    var h = img.height;

    c.width = w;
    c.height = h;

    ctx.drawImage(img, 0, 0);
    console.log(c.toDataURL());
</script>