Anzeige

Suche kleines Bildbearbeitungsscript


#1
Hallo,

wie der Titel vermuten lässt, bin ich auf der Suche nach einen kleinen Bildbearbeitungsscript (JS). Grob beschrieben soll es ein Bild proportional vergrößern und verschieben können. Output sollte dann eine gecropte Version des Bildes sein.
Hier die detaillierte Version:
- User läd ein Bild per Ajax Upload hoch. Das Bild muss erst mal auf die Auflösung gecheckt werden (es ist eine Mindestauflösung nötig. Welche ist hier irrelevant, muss aber im vierstelligen Bereich liegen)
- Wenn alles passt, soll das Bild in einem div, canvas oder was auch immer angezeigt werden (nennen wir es Rahmen). Sagen wir das dieser 800x600 px groß ist.
Die Startskalierung liegt bei 100% Breite bzw. Höhe, je nach dem ob es Hoch- oder Querformat Bild ist. Unter 100% darf nicht skaliert werden, da im Rahmen immer das volle Bild angezeigt werden soll. Nun sollte man das Bild vergrößern und verschieben können. Aber es darf kein Leerbereich entstehen, deshalb darf das Bild nicht zu weit verschoben werden können.
Wenn man dann auf „Speichern“ klickt, soll die zugeschnittene Version gespeichert werden. Allerdings in der vollen Auflösung des Bildes und nicht in den 800x600 px.

Kennt jemand ein fertiges Script dass das kann? Ich hab zwar schon gesucht, aber nichts derartiges gefunden.

Danke
j
 

Sempervivum

Erfahrenes Mitglied
#2
Für das reine Panning und Zooming finde ich schon etwas, z. B. hier:
dimxasnewfrozen/Panning-Zooming-Canvas-Demos
Da fehlen natürlich die ganzen Prüfungen, dass keine Leeräume entstehen etc. Außerdem das Laden und Speichern.
Was meinst Du denn mit "Speichern", lokal auf dem Computer des Benutzers speichern oder hochladen und auf dem Server speichern?
Und soll das Ganze auch durch Touch bzw. Gesten (Spreizen der Finger zum Zoomen) bedienbar sein?
Die ganze Bearbeitung muss ohnehin clientseitig erfolgen, wozu dann das Bild erst hochladen?
 
Zuletzt bearbeitet:
#3
Gespeichert soll natürlich auf dem Server, an einen von mir festgelegten Ort.
Touche wäre nice aber nicht nötig. es reicht wenn da z.B. ein + & - Button wäre. Das Script kann leider nur einen kleinen Teil von dem was ich brauche.
 

Sempervivum

Erfahrenes Mitglied
#4
Ich habe da mal etwas ausgearbeitet:
Code:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pan and Zoom Image</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
</head>
<body>
    Choose a file: <input type="file" id="testfile">
    <canvas></canvas>
    <script>
        var wCanvas = 800, hCanvas = 600;
        $('canvas').attr({ width: wCanvas, height: hCanvas });
        document.getElementById("testfile").addEventListener("change", function () {
            var file = this.files[0];
            var read = new FileReader();
            read.onloadend = function (event) {
                $("canvas").drawImage({
                    layer: true,
                    name: 'img',
                    source: event.target.result,
                    fromCenter: false,
                    draggable: true,
                    drag: checkBoundaries,
                });
                setTimeout(function () {
                    var layer = $('canvas').getLayer('img');
                    var scale = wCanvas / layer.width;
                    var x = -layer.width * (1 - scale) / 2,
                        y = -layer.height * (1 - scale) / 2;
                    $('canvas').setLayer('img', {
                        scale: scale,
                        x: x, y: y
                    }).drawLayers();
                }, 100)
            }
            read.readAsDataURL(file);
        });
        $('canvas').on('mousewheel', function (event) {
            var layer = $('canvas').getLayer('img');
            checkBoundaries(layer, event.deltaY);
            $('canvas').drawLayers();
        });
        function checkBoundaries(layer, deltawheel) {
            var scale = layer.scale;
            var w = layer.width, h = layer.height;
            if (deltawheel) {
                var newscale = layer.scale * (1 + deltawheel / 10);
                if (h * newscale >= hCanvas && w * newscale >= wCanvas) {
                    layer.scale = newscale;
                    scale = newscale;
                }
            }
            var deltax = w * (scale - 1) / 2, deltay = h * (scale - 1) / 2;
            var effx = layer.x - deltax,
                effy = layer.y - deltay,
                effright = layer.x + w + deltax,
                effbottom = layer.y + h + deltay;
            if (effx > 0) layer.x = deltax;
            if (effy > 0) layer.y = deltay;
            if (effright < wCanvas) layer.x = -w / 2 * (1 + scale) + wCanvas;
            if (effbottom < hCanvas) layer.y = -h / 2 * (1 + scale) + hCanvas;
        }
    </script>
</body>
</html>
Hochladen ist noch nicht drin, ebenso die Prüfung der Auflösung.
Zoomen durch Mausrad.
Viel Spaß beim Ausprobieren.
 
Zuletzt bearbeitet:
#5
Hi, vielen Dank für deine Mühe. Ich will ja nicht undankbar sein, aber das ist doch etwas buggy. Zudem fehlt ja das Croppen des Bildes (was aber wahrscheinlich etwas schwierig zum umsetzen ist).
Hochladen und Prüfung der Auflösung brauche ich nicht. Das kann ich machen.
 

Sempervivum

Erfahrenes Mitglied
#6
Inwiefern meinst Du denn, dass das buggy ist? Und was meinst Du mit Croppen? Wenn man zoomt, den Ausschnitt einstellt und dann das Canvas in eine DataURL ausliest, hat man automatisch den Ausschnitt.
 
#7
Mit Croppen meine den Ausschnitt. Das Problem hierbei ist ja, das dadurch nur die Maße des Canvas gespeichert werden. Wenn das Bild z.B. 3000*2000 px groß, kommt im oberen Bsp. ja eins mit der der Auflösung 800*600 raus. Wenn ich das Bild um 200% vergrößere, müsste aber eine Auflösung von 1500*1000px raus kommen.

Zum buggy:
wenn man z.B. ein langes Bild hat und mit dem Mausrad das verkleinern oder vergrößern will, scrollt das Bild gleich in entsprechender Richtung mit.
 
#9
kann ich verstehen. Ist auch nicht so einfach. Prinzipiell würde das ja nur mit einem PHP Script funktionieren. Den müsste man die x & y Koordinaten mitteilen + Breite & Höhe relativ zur Originalgröße, was die Sache wieder komplizierter macht.
 

Technipion

Erfahrenes Mitglied
#10
Klingt so als hättest du relativ konkrete Vorstellungen was du da haben möchtest. Außerdem scheint es wohl nicht so einfach zu sein, und/oder du willst oder kannst es nicht selbst entwickeln.

Vielleicht schaust du dich mal hier im Forum an der Jobbörse um?

Gruß Technipion
 
#11
Das mit Canvas speichern ist zwar ne tolle Idee, in der Realität aber nicht brauchbar. Wenn man z.B. das ganze mit einem Smartphone anwendet, wäre die Auflösung mickrig. Aber trotzdem danke für deine Mühe Sempervivum
 
Anzeige