Anzeige dynamisch erzeugter Bilder

[Tom85Tom]

Hallo zusammen,

ich bin recht neu in der Web Entwicklung und habe da ein Problem mit der Anzeige dynamisch generierter Bilder. Vieleicht hat da jemand eine Idee.
Serverseitig generiere ich Bilder mit ASP.Net Core. Die Bilder werden anhand von Benutzer Eingaben zur Laufzeit gerendert. Ich habe sie also nicht auf der Platte.
Jetzt geht es darum wie ich diese anzeige. Aktuell mache ich aus meinem byte stream eine base64 kodierten String und setzt diesen als source des html image.
Jetzt habe ich gemerkt, dass die Anzeige auf mobile devices echt ewig dauert... so ein Bild kann schonmal über 1 MB haben... das ganze als String in HTML eingebettet ist laufzeittechnisch wohl ungünstig
Hat da jemand eine alternative Idee?

Vielen Dank schonmal im Voraus
Thomas

 

[Sempervivum]

Du kannst auch Binärdaten als Quelle für ein img-Tag verwenden, wenn Du sie direkt ausgibst. Leider verstehe ich nichts von ASP.Net aber mit PHP ist es kein Problem. Beispiel von hier:
https://www.geeksforgeeks.org/php-imagecreatetruecolor-function/

<?php
// ini_set('display_errors', '1');
// error_reporting(E_ALL);
// ini_set('max_execution_time', 0);

// Set the vertices of polygon
$values = array(
    150, 50, // Point 1 (x, y)
    50, 250, // Point 2 (x, y)
    250, 250, // Point 3 (x, y)
);

// Create the size of image or blank image
$image = imagecreatetruecolor(300, 300);

// Set the background color of image
$background_color = imagecolorallocate($image, 0, 153, 0);

// Fill background with above selected color
imagefill($image, 0, 0, $background_color);

// Allocate a color for the polygon
$image_color = imagecolorallocate($image, 255, 255, 255);

// Draw the polygon
imagepolygon($image, $values, 3, $image_color);

// Output the picture to the browser
header('Content-type: image/png');

imagepng($image);

Wahrscheinlich ist das auch mit ASP möglich.
Dann kann man das Skript als Quelle für ein img-Tag verwenden:

    <img src="create-img.php">

Außerdem würde ich prüfen, ob das Bild optimal komprimiert ist. Für einfache Grafiken eignet sich PNG am besten.

 

[Tom85Tom]

Danke für die Antwort. ASP seitig gebe ich jetzt einen byte stream zurück. Funktioniert aber leider trotzdem nicht. Das Problem liegt wohl im JavaScript.

<script type="text/javascript">
    function OnSubmit() {
        var data = $("#imageForm").serialize();
        $.ajax({
            type: 'POST',
            url: '/Home/ImageDetailsPost',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            data: data,
            success: function (result) {
                var blob = new Blob([result], { result: "image/png" })

                document.getElementById("resultImage").src = blob;

                var a = document.getElementById("dummyElement");
                a.href = window.URL.createObjectURL(blob);
                a.download = "result.png";


                $('#resultModal').modal('show');
            },
            error: function () {
                alert('Failed to receive the Data');
                console.log('Failed ');
            }
        })
    }

    function OnDownloadButton()
    {
        var a = document.getElementById("dummyElement")
        a.dispatchEvent(new MouseEvent('click'));
    }

    function OnClose() {
        $('#resultModal').modal('hide');
    }
</script>

Im Prinzip schicke ich ein Formular ab, woraufhin die Grafik generiert wird. Die Grafik möchte ich dann meinem Image HTML Element zuweisen und auch über einen Download Button zur Verfügung stellen. Downloaden tut er zwar was, aber beim öffnen des png sagt er dass das file format nicht unterstützt wird. Und das bild wird auf der HTML Seite leider auch nicht angezeigt.
ASP seitig gebe ich return File(imageBytes, "image/png"); zurück. Ist image/png vielleicht falsch?

Oder mach ich das alles ganz ganz falsch? Ist meine erste Website... Bin eigentlich Desktop Entwickler :/

 

[Sempervivum]

$.ajax scheint es in sich zu haben wenn es um binäre Daten geht, siehe die Antwort von MattE hier:
https://stackoverflow.com/questions/33902299/using-jquery-ajax-to-download-a-binary-file
Mit dem guten alten XMLHttpRequest ist es jedoch relativ einfach, siehe die Antwort von Brandon. Diese Lösung habe ich getestet und sie funktioniert einwandfrei.

 

[Sempervivum]

PS: Ich habe das auch mit dem etwas moderneren fetch getestet und es funktioniert ebenfalls einwandfrei:

    <form action="" method="post">
        R:<input name="r" value="0"> G:<input name="g" value="0"> B:<input name="b" value="255">
        <button type="submit">Send it!</button>
    </form>
    <img id="testimg">
    <script>
        document.querySelector('form').addEventListener('submit', (event) => {
            event.preventDefault();
            fetch('get-image.php', {
                method: 'post',
                body: new FormData(document.querySelector('form'))
            }).then(res => {
                return res.blob();
            }).then(blob => {
                document.getElementById('testimg').src = URL.createObjectURL(blob);
            });
        });
    </script>

 

[Tom85Tom]

Vielen Dank. es funktioniert perfekt ;-)