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:
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:
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
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:
Code:
function capture(){ html2canvas($('#captured_div')).then(function(canvas) { var img = canvas.toDataURL(); $('#new_div').css('background-image', 'url('+img+')'); }); }
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:
Code:
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+')'); }); }
Habt ihr da irgendwelche Ideen bzw. Ratschläge? Wäre euch dafür sehr dankbar!
Beste Grüße
Kommentar