Canvas mit Gaussian Blur / Gaußscher Weichzeichner

[iNetw0rker]

Hallooooo,

ich benutze html2canvas (https://html2canvas.hertzen.com/), um quasi einen "Screenshot" eines bestimmten Teils meiner Website zu machen und diesen direkt wieder einem anderen DIV als Background-Image zuzuweisen. Soweit so gut, hier der entsprechende Code:

function capture(){
    html2canvas($('#captured_div')).then(function(canvas) {
        var img = canvas.toDataURL();
        $('#new_div').css('background-image', 'url('+img+')');
    });
}

Das funktioniert auch wunderbar (wenn auch sehr langsam....)

Nun fänd ich es aber echt wunderbar, wenn dieses neue Hintergrundbild mit einem FIlter, genauer gesagt dem Gaußschen Weichzeichner (bzw. engl: "Gaussian blur") versehen wird. Ich habe dafür einfach mal google mit den Stichwörtern "Canvas gaussian blur" gefüttert. Heraus kam dann eigentlich fast als einziges das hier: http://www.quasimondo.com/StackBlurF...kBlurDemo.html
Nun habe ich aber mal so gar keine Ahnung wie ich das nun umsetzen soll. ehrlich gesagt hatte ich vorher auch noch nicht viel mit den canvas zu tun... Die Sache ist ja, dieses StackBlur erwartet ja als Parameter nen richtiges Image, das kann ja mit dem bereits erzeugtem(?) canvas rein gar nichts anfangen. Abgesehen davon will es das Ergebnis ja auf ein bestehendes canvas auf der seite mit einer bestimtmen ID anwenden....

Mir wäre etwas lieb wie:

function capture(){
    html2canvas($('#captured_div')).then(function(canvas) {
        var newcanvas = canvasblur(canvas, '10px'); //Ausgedachte Beispielfunktion wie ich es gerne hätte, als erstes wird eben dieses canvas übergeben und als zweites der radius in Pixeln.
        var img = newcanvas.toDataURL();
        $('#new_div').css('background-image', 'url('+img+')');
    });
}

So stelle ich mir das dann halt vor. Und heraus kommt dann wieder nen canvas mit angewendetem gaussian blur, woraus ich dann weiter normal mein background-image erzeuge....


Habt ihr da irgendwelche Ideen bzw. Ratschläge? Wäre euch dafür sehr dankbar!

Beste Grüße

[rudygotya]

ich benutze html2canvas (https://html2canvas.hertzen.com/), um quasi einen "Screenshot" eines bestimmten Teils meiner Website zu machen und diesen direkt wieder einem anderen DIV als Background-Image zuzuweisen.

Wenn du schon so weit bist, wende einen css filter auf das Hintergrundbild an. https://developer.mozilla.org/en/docs/Web/CSS/filter

[iNetw0rker]

Okay, das habe ich nun getan, da habe ich allerdings das Problem, dass es an den Rändern vom div quasi immer "weniger" wird. Ich lade mal ein Beispiel hoch wie ich das meine. Bei mir sieht's momentan so aus wie auf dem Bild (links), ich möchte das aber gerne so haben wie auf dem Bild (rechts)....
Ist das irgendwie machbar? darum dachte ich es wäre vielleicht shclau den filter bereits vorher auf dieses canvas anzuwenden, sofern es denn ginge...

[iNetw0rker]

Keiner mehr eine Idee?