Загрузить сгенерированный холст с blobs

Question

Я работаю над проектом, который создает изображение на холсте HTML, а затем предлагает загрузить изображение в формате PNG.

Программа должна быть клиентской (javascript).

я могу преобразовать холст изображение с помощью

var canvas=document.getElementById('canvas'); 
var img = canvas.toDataURL("image/png;base64"); 

И код, который должен загрузить изображение является:

var container = document.querySelector('#container2'); 
//container2 is a div in HTML 
    var output = container.querySelector('output'); 
//output is inside container2 
    window.URL = window.webkitURL || window.URL; 
    var prevLink = output.querySelector('a'); 
    if (prevLink) { 
    window.URL.revokeObjectURL(prevLink.href); 
    output.innerHTML = '';} 
//removes the download link if already there 

      var bb = new Blob([img], {data: "image/png;base64"}); 
//creates new blob from the img variable 
    var a = document.createElement('a'); 
    a.download = 'test' + '.png'; 
//file name 
    a.href = window.URL.createObjectURL(bb); 
//create URL from blob 
    a.textContent = 'Click here for download'; 

    a.dataset.downloadurl = ["image/png;base64", a.download, a.href].join(':'); 
    output.appendChild(a); 

Это отлично работает, если blobvariable является строка текста вместо переменной «img». Вместо изображения я получаю поврежденный файл .png, который, открытый в блокноте, дает данные: image/png; base64, iVBORw0KGgoAAAANSUhEU ... (длинная строка букв base64), которая является правильной строкой, но apparantly not good для изображений PNG. Но если я пишу

document.write('<img src="'+img+'"/>'); 

Изображение открывается правильно на новой вкладке.

Как я могу сделать загруженное изображение неповрежденным?

(это кажется невозможным, чтобы загрузить данные, сгенерированные Canvas2image)

Answer 1

выглядит, как вам нужно, чтобы преобразовать строку base64 обратно в сгусток. вот как: Base64 encoding and decoding in client-side Javascript

document.write может работать на некоторых браузерах, если они способны обрабатывать base64 изначально.

Другая проблема заключается в том, что JavaScript обычно работает со строкой, но для загрузки файла вам нужно что-то вроде ByteArray. Вот реализация, я нашел: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Вот как я получил это работает, то:

var ab = Base64Binary.decodeArrayBuffer(img.substring(22)); 
var bb = new Blob([ab]); 
var a = document.createElement('a'); 
a.download = 'test' + '.png'; 
a.href = window.URL.createObjectURL(bb); 
a.textContent = 'Click here for download'; 
output.appendChild(a);