用斑點下載生成的畫布

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文件，在記事本中打開給出data：image/png; base64，iVBORw0KGgoAAAANSUhEU ...（長64字母的字符串），這是正確的字符串，但不是很好爲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);