Создать изображение Динамически/CSS на холст?

-2

Я хотел бы создать изображение динамически в Javascript, который должен соответствовать двум требованиям.Создать изображение Динамически/CSS на холст?

Она нуждается в цветной фон (скажем #fff) и быть определенного размера (скажем, 800x300)
мне нужно, чтобы иметь возможность затем поместить другое изображение на нем и положение его (надеюсь, с CSS-эск тип правила, как ширина: 150px; высота: 80px; слева: 30px; сверху: 30px; преобразование: поворот (7deg);»и т.д. и т.п.

есть библиотека, вы знаете о том, что делает что-то функция?

источник

2016-07-13 EZoolander

да библиотеки Jquery. – DaniP

Как конкретно холст участвует в вопросе? – Teemu

До сих пор я изучал метод CreateIMageData(), и он выглядит многообещающим. Я больше парень PHP - я бы предпочел сделать его в браузере, чем опубликовать его на сервере и сделать какой-то процесс GD. То, что я пытаюсь сделать, это положение двух элементов относительно друг друга и поддерживать регистрацию в такт. Один объект является фиксированным размером и всегда будет. Второе изображение является переменным по размеру, что делает регистрацию немного сложнее. Моя мысль заключается в том, если я динамически преобразую его в другое изображение, которое будет иметь тот же размер, что упростит мою задачу :) – EZoolander

Вам действительно не нужна библиотека для этого. Если я правильно вас понимаю, вы просто хотите co ntainer с фоном, который содержит динамически сгенерированное изображение. Я бы просто использовал фоновое изображение или цвет на контейнере и appendChild изображение внутри него.

Используйте относительное положение на родительском устройстве и абсолютное положение на изображении, чтобы вы могли центрировать положение изображения и поворачивать его по центру.

создавать и добавлять изображения я хотел бы использовать:

//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)

Я бы затем использовать CSS, чтобы преобразовать изображение

пример codepen http://codepen.io/shperber/pen/qNVLjv

источник

2016-07-13 15:45:57

Создать изображение Динамически/CSS на холст?

ответ

Смежные вопросы