Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2018, 19:00
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

Что за библиотека? (работа с картинками)
Задача такая, на сайте хочу добавить возможность менять картинку, точнее добавлять текст для гравировки на кольцо, для этого необходимо чтобы создавалась картинка с превью в виде png,svg,jpg или др. Текст вводит клиент, выбирает шрифт, а уже с применением css и эффектов это прозрачным слоем добавляется на существующее кольцо (становится одной картинкой)... чем такое можно сделать? есть ли на JS?


Последний раз редактировалось 3dartmax, 06.03.2018 в 23:03.
Ответить с цитированием
  #2 (permalink)  
Старый 08.03.2018, 09:27
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,831

Это 2d, обратную сторону мы не видим, а если текст длинный?
Ответить с цитированием
  #3 (permalink)  
Старый 08.03.2018, 21:04
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

Нашел пример (
github.com/Ipatov/jqury_ui_and_php_gd), только там картинки... а нужно чтобы текст вставлялся... и желательно чтобы все это было на JS
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2018, 00:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,348

сделать можно, только вам кольца нужно будет подгонять, чтобы положение текста относительно фото было у всех одинаковое.
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2018, 23:35
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

Так а как сделать? есть варианты? Примеры?
Ответить с цитированием
  #6 (permalink)  
Старый 10.03.2018, 01:12
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 811

используй WebGL =)
Ответить с цитированием
  #7 (permalink)  
Старый 10.03.2018, 04:11
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

А подробнее можно? с примером? как работает?
Ответить с цитированием
  #8 (permalink)  
Старый 10.03.2018, 18:47
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,831

3dartmax,
https://github.com/dirkweber/csswarp.js
Ответить с цитированием
  #9 (permalink)  
Старый 10.03.2018, 19:26
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 811

Сообщение от 3dartmax Посмотреть сообщение
А подробнее можно? с примером? как работает?
А может сам попробуешь хоть что нибудь сделать?
Ну вот небольшой простой пример для начала https://threejs.org/examples/webgl_m...re_canvas.html

Если его немного обработать напильником получится
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>#drawing-canvas {position: absolute;background-color: #000000;top: 0px;right: 0px;z-index: 3000;cursor: crosshair;}</style>
</head><body><canvas id="drawing-canvas" height="512" width="512"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script>var camera, scene, renderer, mesh, material,texEnvMap;var drawStartPos = new THREE.Vector2();
init();setupCanvasDrawing();animate();function init() {camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;scene = new THREE.Scene();material = new THREE.MeshPhongMaterial({"color": 0xf7c644,"emissive":0x59520b,"specular": 0x111111,
"type": "MeshPhongMaterial","shininess": 30,"reflectivity": 0.6,"depthFunc": 3,"depthTest": true,"depthWrite": true});
var dataStr = "https://c1.staticflickr.com/9/8873/18598400202_3af67ef38f_q.jpg";
tmp = new THREE.CubeTextureLoader().setPath( '' ).load( [ dataStr, dataStr, dataStr, dataStr, dataStr, dataStr ] );
material.envMap = tmp;var light = new THREE.PointLight( 0xff0000, 1, 400 );light.position.set( 110, 50, 150 );var bcolor = new THREE.Color( 0xdadada );
scene.background = bcolor;scene.add( light );mesh = new THREE.Mesh( new THREE.TorusGeometry( 110, 10, 22, 64,6.8 ), material );
var TorusToRingMatrix = {};TorusToRingMatrix.elements = [1.28,0,0,0,0,0.17,-1.3,0,0,4,0.8,0,0,1.9,-5.8,1];mesh.geometry.applyMatrix ( TorusToRingMatrix );
scene.add( mesh );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);window.addEventListener('resize',onWindowResize,false );}
function setupCanvasDrawing(){var drawingCanvas = document.getElementById( 'drawing-canvas' );var drawingContext = drawingCanvas.getContext( '2d' );
drawingContext.fillStyle = "#FFFFFF";drawingContext.fillRect( 0, 0, 512, 512 );drawingContext.fillStyle = "#000000";drawingContext.font = "48px Arial";
drawingContext.fillText("Hello World",30,270);material.bumpMap = material.map = new THREE.Texture( drawingCanvas );
material.map.needsUpdate = true;var paint = false;drawingCanvas.addEventListener( 'mousedown', function( e ) {paint = true;drawStartPos.set( e.offsetX, e.offsetY );
});drawingCanvas.addEventListener('mousemove',function(e) {if(paint){draw( drawingContext, e.offsetX, e.offsetY );}});drawingCanvas.addEventListener( 'mouseup',
function(e){paint = false;});drawingCanvas.addEventListener( 'mouseleave', function( e ) {paint = false;});}function draw( drawContext, x, y ) {
drawContext.moveTo( drawStartPos.x, drawStartPos.y );drawContext.strokeStyle = '#000000';drawContext.lineTo( x, y );drawContext.stroke();
drawStartPos.set( x, y );material.map.needsUpdate = true;}function onWindowResize() {camera.aspect = 512 / 512;camera.updateProjectionMatrix();renderer.setSize(
512,512);}onWindowResize();function animate(){requestAnimationFrame(animate);mesh.rotation.x += 0.01;mesh.rotation.y += 0.01;renderer.render( scene, camera );};
</script><canvas width="512" height="512" style="width: 512px; height: 512px;" stule="float:left"></canvas></body></html>

Последний раз редактировалось MallSerg, 10.03.2018 в 20:32.
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2018, 03:04
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

Извиняюсь что возможно неправильно объяснил задачу, но мне нужна картинка поверх нее склеенная с текстом, не 3D, а именно картинка, я ввожу текст в поле, а текст размещается поверх картинки и становистя одним файлом в формате JPG. Но пример супер!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смишных картинок тред megaupload Оффтопик 3433 19.06.2018 11:43
Работа с адресной строкой - что для этого нужно? riva Общие вопросы Javascript 10 04.07.2013 03:42
работа менеджером georgi Работа 1 29.03.2013 12:18
Библиотека jQuery UI w46823 AJAX и COMET 1 27.04.2012 14:36