Pass image from Javascript to KrPano

Hallo!

Ich komme gerade nicht recht weiter, vielleicht könnt ihr mir helfen.

Ich erstelle momentan ein Image mit Javascript, indem ich auf einer Canvas etwas zeichne.
Danach erstellt mein Code einen Hotspot in KrPano.

Die Frage ist: wie kann ich das obrige generierte Bild als Hotspot-Bild verwenden..?

Lg
Max Aigner

Hi Klaus,
ein Plugin wäre natürlich Gold wert!
hm also das Bild in Base64 zu convertieren, den String nach krpano schicken... (?)
also bei krpano hotspots kann ich ja nur url="path/image.jpg" angeben..
In den KrPano Actions kann ich aus Base64 noch kein Bild erzeugen und in Hotspots einschleusen, oder?...

Kann ich denn dieses image.jpg, das ich dem Hotspot gebe irgendwie überschreiben mittels javascript..?

In deinem Link erzeugt er aus DOM-Objekten Bilder, soweit ichs verstanden habe.. soweit müsste ich auch schon sein.. Vermutlich komme ich ohne ein Canvas-Plugin nicht weiter(?)..?

Lg
Max

Ein bisschen was habe ich derweil gelernt über Javascript, wieder:
Hier ist die Funktion, die das krPanobild anhand eines Base64-Strings erstellen soll.. Wenn ich das Bild im Browser anzeigen lasse sehe

// Create Hotspot with custom image in krPano
var hotspotnumber = 0;
function addhotspotonkarpano(krpano ){//, ImageObject) {

var mouse_at_h = krpano.get("mouseath");
var mouse_at_v = krpano.get("mouseatv");
hotspotnumber = hotspotnumber + 1;
var spotname = "spot" + hotspotnumber;

var str = "";

str += "addhotspot(" + spotname + ");";
str += "set(hotspot[" + spotname + "].url,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASzSURBVGhD7Zm/Lj9BFMUJEiQSiYaKWqVUKnU0EqVS6Q2UHkGi8QiiUnoEj+ERlH4ne+7e3O+d/7uDn8SnkJnZmdlzZu7cHSx9tnN/f79kODg4uLm5eX9/59Pd3V15MHJ1dfX6+sqn3ZliIJRI4MR5s2DU4+OjTNGPZgNWIpZWSjE+Pj7Oz8+lMvL29iYTdaLZgC7/5eUlW56eno6Ojthoub29xVMoRoBhc9h4cnKiwdaFZgPUAbDA0jSA6unpqTwbgQeVrqyvr9/d3cmw2Uw38PLyQnEMfTyKeogCD5xtPtMNuKMMGzij8CD1EjLdbJonwuKJhACua6aDpVcUFQzYOGGyx08qmEkqivSNROMzRcGAixO8Fecynz3rwSY4uRlSTgoGZPQiZ2dnOzs7UpnB8vLyxsaGVOpgarbUGkgl+68DWpESwt12n8JaA8gwz8/P4YJdXFy4D0KGqCDL/v7+2tqaVBYTNL6AbMTXnbORggFNKShEr0DSbwQ+GdP4mb/5QNPh4SEnsayurkpphPkKCy/1xZd6BfZUobC9vc2yZW9vT0rjXKrbksozSnFDiM4j9byB6DJbcAXCi3VnotLJ9fW1TFoHVlpGBrCDVPIGpEsaqEc3vmxra4uNFjrkbK2kPDD5SCVvQJc2it5AgdurObotqf20SNcBbyCzj8BKVKu9pJO8ACJdB7wB4C4Lm5ubLNjlB3yTDXQkACS7fPKpwXlYWVmR0oA7WhEDWE5NDujNAiguM4MKO1PpwWU8e1Nwi5iZM2LAgklljsWNc7grTaWHVLij/eHhARsu9QHMKcMWKRjQk+rixxFNvtCRt5EJd8rF5df2ic5WMCBDs/Fjd+n4+FhKA6llc9igVeTZ4m1Amgy1BqQew+2SW1f2qUeGmYF2QmkydDCgK2R3iW9t/RgDTgWkPqCvwLTSNNLBwGStUfg6IPUBTUphFHUw0BddbKkPYG/ZCNxR/u8MpPZTjblNqDWgvnt9bltJHeWCgdC3fm5Z/U6oBEh9oGAg9C2VbwwqRV7cZADIoN9rQKOIOZhlwKc18KakTD4/8uJWAy4Hswz4tAjUu1+sJ58fGd9qwOZgVKVUbSB6z5NnWcJ0J4NbDQAZNyRTKVUb0AhU8hdbJUx3HA6kPlClQ0VYNZWhbPMYyVxsLdLbyJX6BANWhDUjj0vY4fVXJhnQxQCQoUMuktLiRN2Rd3Q3YMtfd6GI/ior9ZkGIHpCFLXifkkCSEpsAWwhtQasaBtF4R/s52O16om36ZgtpNaAC337Zw88Yp8uuA+fNko9SAO1BoBMMEQRFkb/o4o96XUYMI9Vr1pTyw8aDLjQhwfbMt+DPbhA1WeWHzQYsFFEubZlpgcXOVZ9GFGWBgPAbQLo4sGp1IObcmVpMxBugmuEB/snzhowT83aR9WDNgPAbkLUA8Clv8YGhqOnjBloVQ+aDaRixnkgoZNQtDJBPWg2AFIeELs1/7QLweeWcQ/pqT1JMcUAyMR9k42MdFBUDyYaAMW4TzlR0SQVVDXqwXQDIBr3IDTjiK63UimdzDIAmgKmSJN0MtcAmWnDBVUTfQxY6s1MWO+Q/ga+mT8DP82fgZ/mlxv4/PwHxqi3xKEZ3gkAAAAASUVORK5CYII=);";
str += "set(hotspot[" + spotname + "].ath," + mouse_at_h + ");";
str += "set(hotspot[" + spotname + "].atv," + mouse_at_v + ");";
str += "set(hotspot[" + spotname + "].scale,0.7);";
str += "set(hotspot[" + spotname + "].zoom,true);";
str += "set(hotspot[" + spotname + "].blendmode,add);";
str += "set(hotspot[" + spotname + "].onhover,showtext(Name of the Hostpot));";
krpano.call(str);
}