Rechtsklick funktioniert nicht

rernanded

Erfahrenes Mitglied
Hallo und ein verspätetes Neues Jahr.

Habe Probleme mit einem js-script - zusätzlich wird fabricjs genutzt.
Der Download per a-tag funktioniert gut, nur kann ich mir per Rechtsklick mit der Maus den Canvas-Inhalt nicht anzeigen lassen (ich sehe nur weiss) und und "Speichern unter" geht überhaupt nicht.
MONI
HTML:
<script type='text/javascript' src='fabric_2.4.3.js'></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(255,255,255)'
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            var imgInstance = new fabric.Image(img, {
                scaleX: 0.1,
                scaleY: 0.1
            })
            canvas.add(imgInstance);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

download_img = function(element) {
  var image = canvas.toDataURL("image/jpg");
  element.href = image;
};

}//]]>

</script>

</head>
<body>
<div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
           <br /><br /><br />
    <canvas id="imageCanvas" width="963px" height="654px"></canvas>
           <br /><br /><br />
<a id="download_img" download="123.jpg" href="" onclick="download_img(this);">download_img</a>
</div>
</body>
 
Guten Morgen Moni, ich wünsche ebenfalls ein frohes neues Jahr!

nur kann ich mir per Rechtsklick mit der Maus den Canvas-Inhalt nicht anzeigen lassen (ich sehe nur weiss)
Das Problem wird hier diskutiert:
Export Canvas to JPEG · Issue #2540 · fabricjs/fabric.js
Verwende ich die Syntax, die dort angegeben ist, enthält die herunter geladene Datei das Bild, das im Browser sichtbar ist.

und "Speichern unter" geht überhaupt nicht.
Das liegt daran, dass fabricjs ein weiteres Canvas über das vorhandene legt. Lösung für das Problem wird hier angegeben:
How to get element from right click on it (fabric.js)

Übrigens:

CDATA ist schon lange überflüssig, Du kannst es weg lassen.
 
Zuletzt bearbeitet:
Hi, ich hatte auf fabricjs.com nach Lösungen gesucht. Da gab es nichts. Danke für den CDATA-Tipp, den Code habe ich von einem Arbeitskollegen übernommen und mich genau damit noch gar nicht befasst.
Ich probier's mal aus.
MONI
 
Hab mal das eingebaut, funktioniert aber leider nicht.
HTML:
function saveImage(e) {
    this.href = canvas.toDataURL("image/png");
    this.download = '123.png'
}
 
Du musst ein Objekt übergeben statt eines Strings:
Code:
function saveImage(e) {
    this.href = canvas.toDataURL({format: 'jpeg',});
    this.download = '123.png'
}
 
Bei mir funktioniert es einwandfrei, hier meine Testdatei:
Code:
<!DOCTYPE html>
<html lang="de">

<head>
    <title>Fabric JS</title>
    <style>
    </style>
    <script>
    </script>
    <script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/index.min.js"></script>   
    <script type='text/javascript'>
        window.onload = function () {
            var canvas = new fabric.Canvas('imageCanvas', {
                backgroundColor: 'rgb(255,255,255)'
            });

            var imageLoader = document.getElementById('imageLoader');
            imageLoader.addEventListener('change', handleImage, false);

            function handleImage(e) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var img = new Image();
                    img.onload = function () {
                        var imgInstance = new fabric.Image(img, {
                            scaleX: 0.1,
                            scaleY: 0.1
                        })
                        canvas.add(imgInstance);
                    }
                    img.src = event.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);
            }

            download_img = function (element) {
                var image = canvas.toDataURL({format: 'jpeg'});
                element.href = image;
            };

        }
    </script>

</head>

<body>
    <div id="container">
        <input type="file" id="imageLoader" name="imageLoader" />
        <br /><br /><br />
        <canvas id="imageCanvas" width="963px" height="654px"></canvas>
        <br /><br /><br />
        <a id="download_img" download="123.jpg" href="" onclick="download_img(this);">download_img</a>
    </div>
</body>

</html>
 
Download per a-tag geht. Ging bei mir auch immer. Rechtsklick (Grafik in neuem Tab öffnen) geht nicht.
Den Rechtsklick benutze ich für eine Vorschau. Bzw. will ihn nutzen.
 
Zuletzt bearbeitet:
Ja ist es auch, aber meinen Rechtsklick-Nutzen zu erklären dauert hier zu lange. Es geht ja auch nicht nur um die Vorschau, sondern auch um den auswählbaren Speicherort und den änderbaren Dateinamen. Das kann ich zwar über den a-tag managen, aber so wäre man flexibler denn ich gebe ja auch das Script bzw. den Link darauf weiter an Leute die technisch überhaupt keine Ahnung haben. Denen sag ich dann Rechtsklick usw. usf.
Oder ich mache mir Gedanken über ein Formular.
Habe ich schon gesucht:
download form for file name and storage location

Und noch keine Idee wie ich das machen soll.

Rechtsklick wäre also simpler, geht ja auch bei anderen Canvas. Nur ich kriegs mal wieder nicht hin.

MONI
 
Zuletzt bearbeitet:
Zurück