Bild dynamisch/CSS zu Canvas erstellen?

-2

Ich möchte ein Bild dynamisch in Javascript erstellen, das zwei Anforderungen erfüllen muss.Bild dynamisch/CSS zu Canvas erstellen?

Es braucht einen farbigen Hintergrund (etwa #fff) und sein einer bestimmten Größe (zB 800x300)
ich dann auf sie ein anderes Bild der Lage sein müssen platzieren und positionieren Sie es (hoffentlich mit CSS-esque geben Sie Regeln wie width: 150px; height: 80px; links: 30px; top: 30px; verwandeln: drehen (7deg),“etc etc.

gibt es eine Bibliothek, die Sie sich bewusst sind, macht diese Art von Funktion?

Quelle

2016-07-13 EZoolander

Ja eine Bibliothek JQuery zu verwandeln. – DaniP

Wie genau ist Canvas in der Frage beteiligt? – Teemu

Bisher habe ich die CreateIMageData() - Methode untersucht - und es sieht vielversprechend aus. Ich bin eher ein PHP-Typ - ich würde es lieber im Browser rendern, als es ins Backend zu posten und irgendeinen GD-Prozess zu machen. Was ich versuche zu tun ist, zwei Elemente relativ zueinander zu positionieren und die Registrierung in Takt zu halten. Ein Objekt hat eine feste Größe und wird es immer sein. Das zweite Bild ist in der Größe variabel - was die Registrierung etwas schwieriger macht. Mein Gedanke ist, wenn ich es dynamisch auf ein anderes Bild rendere, das die gleiche Größe hat - das wird meine Aufgabe vereinfachen :) – EZoolander

Sie brauchen nicht wirklich eine Bibliothek für das. Wenn ich Sie richtig verstehe, wollen Sie einfach eine co ntainer mit einem Hintergrund, der ein dynamisch erzeugtes Bild enthält. Ich würde einfach ein Hintergrundbild oder eine Farbe für den Container verwenden und das Bild darin anhängen.

Verwenden Sie eine relative Position auf der übergeordneten und eine absolute Position auf dem Bild, damit Sie das Bild zentrieren und von der Mitte aus drehen können.

zu erstellen und Bild anhängt ich verwenden würde:

//generate image dynamically 
function dynamicImage(url){ 
    var img = new Image(); 
    img.src = url; 
    img.setAttribute("class", "placeholder-image") 
    return img 
} 

var dynamic = dynamicImage('http://placehold.it/350x150') 

var container = document.querySelectorAll('.image-container')    
container[0].appendChild(dynamic)

würde ich dann CSS verwenden, um das Bild

Beispiel in codepen http://codepen.io/shperber/pen/qNVLjv

Quelle

2016-07-13 15:45:57

Bild dynamisch/CSS zu Canvas erstellen?

Antwort

Verwandte Themen