Download Canvas als PNG in fabric.js geben Netzwerk Fehler

Question

Ich möchte Canvas als PNG mit Fabric.js herunterladen. Während des Downloads möchte ich das Bild skalieren. So verwende ich multiplier Eigenschaft von toDataURL() Funktion. Aber ich bekomme Fehlgeschlagen-Netzwerkfehler

PS: Wenn ich multiplier Eigenschaft nicht geben, es ist das Herunterladen, aber ich tun wollen multiplier Eigenschaft verwenden, da ich das Bild zu skalieren haben

Dies ist, was ich tue:

HTML-Code:

<canvas width="400" height="500" id="canvas" ></canvas> 
<a id='downloadPreview' href="javascript:void(0)"> Download Image </a> 

JS

document.getElementById("downloadPreview").addEventListener('click', downloadCanvas, false); 

var _canvasObject = new fabric.Canvas('canvas'); 

var downloadCanvas = function(){ 
    var link = document.createElement("a"); 

link.href = _canvasObject.toDataURL({format: 'png', multiplier: 4}); 
     link.download = "helloWorld.png"; 
    link.click(); 

} 

Answer 1

Das Problem, das Sie ist konfrontiert sind nicht direkt mit fabricjs bezogen, (noch Leinwand und nicht einmal Javascript btw) , kommt aber von Einschränkungen, die einige Browser (einschließlich Chrome) auf die maximale Länge für das src-Attribut eines Anchor-Elements (<a>) mit dem donwload-Attribut haben.

Wenn dieses Limit erreicht ist, dann ist das einzige, was Sie haben, dieser unzugängliche "Network Error" in der Konsole; der Download ist fehlgeschlagen, aber Sie als Entwickler können davon nichts wissen.

Wie in dieser vorgeschlagen (Sie-verweigerte-to-mark-as-)duplicate ist die Lösung entweder erhalten direkt einen Blob, wenn verfügbar (für die Leinwand, können Sie seine toBlob() Methode aufrufen, oder zum ersten convert Ihre dataURI auf einen Fleck, und dann ein object URL von diesem Blob erstellen.

Fabricjs keine toBlob Funktion noch nicht umgesetzt zu haben scheinen, so in Ihrem genauen Fall, werden Sie das später tun.
Sie kann viele Skripts finden, um DataURI in Blob zu konvertieren, eine ist in MDN's polyfill zu Canvas.toBlob() Methode verfügbar.

Dann würde es so aussehen:

// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill 
function dataURIToBlob(dataURI, callback) { 
    var binStr = atob(dataURI.split(',')[1]), 
    len = binStr.length, 
    arr = new Uint8Array(len); 

    for (var i = 0; i < len; i++) { 
    arr[i] = binStr.charCodeAt(i); 
    } 

    callback(new Blob([arr])); 
} 

var callback = function(blob) { 
    var a = document.createElement('a'); 
    a.download = fileName; 
    a.innerHTML = 'download'; 
    // the string representation of the object URL will be small enough to workaround the browser's limitations 
    a.href = URL.createObjectURL(blob); 
    // you must revoke the object URL, 
    // but since we can't know when the download occured, we have to attach it on the click handler.. 
    a.onclick = function() { 
     // ..and to wait a frame 
     requestAnimationFrame(function() { 
      URL.revokeObjectURL(a.href); 
     }); 
     a.removeAttribute('href') 
     }; 
    }; 

dataURIToBlob(yourDataURL, callback); 

Answer 2

Ich habe es. Arbeitete es aus wie

von Kaiido vorgeschlagen

function dataURLtoBlob(dataurl) { 
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], 
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); 
    while(n--){ 
     u8arr[n] = bstr.charCodeAt(n); 
    } 
    return new Blob([u8arr], {type:mime}); 
} 

HINWEIS: Haben Sie die obige Funktion von HTML5/Javascript - DataURL to Blob & Blob to DataURL

var downloadCanvas = function(){ 
    var link = document.createElement("a"); 
     var imgData = _canvasObject.toDataURL({ format: 'png', 
     multiplier: 4}); 
     var strDataURI = imgData.substr(22, imgData.length); 
     var blob = dataURLtoBlob(imgData); 
     var objurl = URL.createObjectURL(blob); 

     link.download = "helloWorld.png"; 

     link.href = objurl; 

    link.click(); 
} 

Answer 3

Da die letzten beiden Antworten nur für dataURLs arbeiten, die Base64-Daten haben, und weil diese Antwort wurde durch allgemeinere Fragen im Zusammenhang mit „Netzwerkfehler“ verwiesen worden, weil der href Attribute, die zu groß sind, hier ist der Code ich verwende:

// must be called in a click handler or some other user action 
var download = function(filename, dataUrl) { 
    var element = document.createElement('a') 

    var dataBlob = dataURLtoBlob(dataUrl) 
    element.setAttribute('href', URL.createObjectURL(dataBlob)) 
    element.setAttribute('download', filename) 

    element.style.display = 'none' 
    document.body.appendChild(element) 

    element.click() 

    var clickHandler; 
    element.addEventListener('click', clickHandler=function() { 
     // ..and to wait a frame 
     requestAnimationFrame(function() { 
      URL.revokeObjectURL(element.href); 
     }) 

     element.removeAttribute('href') 
     element.removeEventListener('click', clickHandler) 
    }) 

    document.body.removeChild(element) 
} 


// from Abhinav's answer at https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/ 
var dataURLtoBlob = function(dataurl) { 
    var parts = dataurl.split(','), mime = parts[0].match(/:(.*?);/)[1] 
    if(parts[0].indexOf('base64') !== -1) { 
     var bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n) 
     while(n--){ 
      u8arr[n] = bstr.charCodeAt(n) 
     } 

     return new Blob([u8arr], {type:mime}) 
    } else { 
     var raw = decodeURIComponent(parts[1]) 
     return new Blob([raw], {type: mime}) 
    } 
} 

Mit diesen Funktionen können Sie den Code, um diese Änderung:

document.getElementById("downloadPreview").addEventListener('click', function() { 
    var dataURL = _canvasObject.toDataURL({format: 'png', multiplier: 4}) 
    download("hellowWorld.png", dataURL) 
})