角度5将图像转换为base64

时间:2018-09-21 03:54:09

标签: javascript typescript canvas base64 angular5

将图像转换为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==

无论出现什么问题,希望您能为我提供帮助。

1 个答案:

答案 0 :(得分:0)

HTML2Canvas中的图像当前存在一个错误:link to bug