angular 5 将图片转base64

Question

我在将图片转换为base64时遇到问题，它转换得很好，但是当我尝试用base64打开时，图像根本不出来，我不知道我遇到了什么问题。

<img id="imageid" src="http://localhost:8000/media/db.png" alt="">

getBase64Image() {
    var data = document.getElementById("imageid");
    html2canvas(data).then(canvas => {  
        var imgconverted = canvas.toDataURL("data:image/jpeg;base64"); 
        console.log(imgconverted, 'base64');
    });  
}

这样出来的结果本来应该没问题的，但是我在浏览器中打开它，图片出不来只有一帧。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqQAAAG2CAYAAACpsJSkAAAXp0lEQVR4Xu3WwQkAMAwDsXb/oV3oEvdRFjCIPO5u23EECBAgQIAAAQIEIoErSCN5swQIECBAgAABAl9AkHoEAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBAQJD6AQIECBAgQIAAgVRAkKb8xgkQIECAAAECBASpHyBAgAABAgQIEEgFBGnKb5wAAQIECBAgQECQ+gECBAgQIECAAIFUQJCm/MYJECBAgAABAgQEqR8gQIAAAQIECBBIBQRpym+cAAECBAgQIEBAkPoBAgQIECBAgACBVECQpvzGCRAgQIAAAQIEBKkfIECAAAECBAgQSAUEacpvnAABAgQIECBA4AFcyNM5B/V48AAAAABJRU5ErkJggg==

无论有什么问题都希望你能帮帮我。

Answer 1

目前 HTML2Canvas 中的图像存在错误：link to bug

angular 5 将图片转base64

angular 5 convert image to base64

javascript

base64

canvas

typescript

angular5