Wie man erkennt, ob ein über Canvas generiertes Bild leer ist (transparentes PNG)?

Question

Ich arbeite an einer Anwendung, in der ein Bild auf einem HTML5-Canvas erstellt/bearbeitet und dann in einem Dateispeicher/Cloud gespeichert wird. Das Problem ist die "Speichereffizienz". Beim Speichern eines leeren Canvas, d.h. eines völlig transparenten leeren PNGs, wird mit toDataURL() übertragen. Eine Möglichkeit, festzustellen, ob ein PNG leer ist, besteht darin, einen booleschen Wert umzuschalten, wenn auf eine beliebige Editier-/Zeichenfunktion geklickt wird, und diesen Wert beim Löschen des Bildschirms zurückzusetzen.

Allerdings ist eine solche Methode nicht foolproof, da ein Benutzer das Bild speichern kann, nachdem er eine Zeichen-/Bearbeitungsfunktion ausgewählt hat, aber doch nichts zeichnet. Gibt es einen nativeren Ansatz, um festzustellen, ob sich der Canvas-Binary-String seit dem Öffnen im Browser geändert hat? Oder gibt es eine andere Möglichkeit, sicherzustellen, dass ein leeres transparentes PNG auf der Client-Seite erkannt wird?

Answer 1

HTML:

SCRIPT:

isCanvasTransparent(document.getElementById("canvas_img"));

function isCanvasTransparent(canvas) { // true if all pixels Alpha equals to zero
  var ctx=canvas.getContext("2d");
  var imageData=ctx.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight);
  for(var i=0;i

``

UPDATE:

Dont use CSS style declarations like border: 1px solid black; for CANVAS, because border included into canvas image, and, as result, alpha chanel is always not equals to zero.

``

Answer 2

Dies ist nicht nativ, aber es sollte funktionieren, da eine leere Leinwand immer die gleiche Daten-URL generiert.

Daher könnten Sie eine versteckte Leinwand erstellen, die Daten-URL dieser Leinwand abrufen und wenn sie mit der Ihres Editors übereinstimmt, sie nicht hochladen. Ganz einfach.

Demo. Zuerst speichern Sie, ohne über die Leinwand zu gehen. Dann gehen Sie darüber und speichern Sie dann. Tada!