AI Powered Image Text Drag And Drop Generator

function processImage(originalImg, initialText1 = "AI Powered App", initialText2 = "Drag Me!", fontSize = 40, textColor = "white", strokeColor = "black") {
  const container = document.createElement('div');
  container.style.fontFamily = 'Arial, sans-serif';
  container.style.display = 'flex';
  container.style.flexDirection = 'column';
  container.style.alignItems = 'center';
  container.style.width = '100%';
  container.style.boxSizing = 'border-box';
  
  // Create UI controls
  const controls = document.createElement('div');
  controls.style.padding = "15px";
  controls.style.background = "#f8f9fa";
  controls.style.marginBottom = "15px";
  controls.style.borderRadius = "8px";
  controls.style.display = "flex";
  controls.style.gap = "10px";
  controls.style.flexWrap = "wrap";
  controls.style.justifyContent = "center";
  controls.style.boxShadow = "0 2px 4px rgba(0,0,0,0.1)";
  
  controls.innerHTML = `
    <input type="text" id="newText" placeholder="Enter custom text..." style="padding: 8px 12px; font-size: 14px; border: 1px solid #ced4da; border-radius: 4px; outline: none;">
    <button id="addBtn" style="padding: 8px 16px; font-size: 14px; cursor: pointer; border: none; border-radius: 4px; background: #0d6efd; color: white; transition: background 0.2s;">Add Free Text</button>
    <button id="aiBtn" style="padding: 8px 16px; font-size: 14px; cursor: pointer; border: none; border-radius: 4px; background: #198754; color: white; transition: background 0.2s;">Generate AI Idea</button>
  `;
  
  const canvasContainer = document.createElement('div');
  canvasContainer.style.position = 'relative';
  canvasContainer.style.maxWidth = '100%';
  canvasContainer.style.overflow = 'hidden';
  canvasContainer.style.boxShadow = "0 4px 8px rgba(0,0,0,0.2)";
  canvasContainer.style.borderRadius = "4px";
  
  const canvas = document.createElement('canvas');
  canvas.style.maxWidth = '100%';
  canvas.style.height = 'auto';
  canvas.style.cursor = 'grab';
  canvas.style.display = 'block';
  
  canvasContainer.appendChild(canvas);
  container.appendChild(controls);
  container.appendChild(canvasContainer);
  
  const ctx = canvas.getContext('2d');
  
  // Match canvas dimensions to the original image dimensions
  canvas.width = originalImg.width;
  canvas.height = originalImg.height;
  
  const texts = [
    { text: initialText1, x: canvas.width * 0.1, y: canvas.height * 0.1 },
    { text: initialText2, x: canvas.width * 0.1, y: canvas.height * 0.25 }
  ];
  
  let dragTarget = null;
  let startX;
  let startY;
  
  // Render loop
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Draw base image
    ctx.drawImage(originalImg, 0, 0);
    
    // Draw all text items
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = Math.max(2, fontSize * 0.1);
    ctx.lineJoin = "round";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    
    for (let t of texts) {
      ctx.strokeText(t.text, t.x, t.y);
      ctx.fillText(t.text, t.x, t.y);
    }
  }
  
  draw();
  
  // Utility for getting translated points depending on CSS scaling
  function getMousePos(e) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    return {
      x: (e.clientX - rect.left) * scaleX,
      y: (e.clientY - rect.top) * scaleY
    };
  }
  
  function getTouchPos(e) {
    const rect = canvas.getBoundingClientRect();
    const touch = e.touches[0];
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    return {
      x: (touch.clientX - rect.left) * scaleX,
      y: (touch.clientY - rect.top) * scaleY
    };
  }
  
  // Event handlers
  function handleDown(pos) {
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    for (let i = texts.length - 1; i >= 0; i--) {
      let t = texts[i];
      let metrics = ctx.measureText(t.text);
      let textWidth = metrics.width;
      
      // Calculate bounding box hit
      if (pos.x >= t.x && pos.x <= t.x + textWidth &&
          pos.y >= t.y && pos.y <= t.y + fontSize * 1.2) {
        dragTarget = t;
        startX = pos.x;
        startY = pos.y;
        canvas.style.cursor = 'grabbing';
        
        // Bring target item to the front of the array layer stack
        texts.splice(i, 1);
        texts.push(dragTarget);
        draw();
        return true;
      }
    }
    return false;
  }
  
  function handleMove(pos) {
    if (!dragTarget) return;
    
    const dx = pos.x - startX;
    const dy = pos.y - startY;
    
    dragTarget.x += dx;
    dragTarget.y += dy;
    
    startX = pos.x;
    startY = pos.y;
    
    draw();
  }
  
  function handleUp() {
    dragTarget = null;
    canvas.style.cursor = 'grab';
  }
  
  // Bind Mouse Events
  canvas.addEventListener('mousedown', function(e) {
    handleDown(getMousePos(e));
  });
  
  canvas.addEventListener('mousemove', function(e) {
    handleMove(getMousePos(e));
  });
  
  canvas.addEventListener('mouseup', handleUp);
  canvas.addEventListener('mouseout', handleUp);
  
  // Bind Touch Events for Mobile compatibility
  canvas.addEventListener('touchstart', function(e) {
    if (handleDown(getTouchPos(e))) {
      e.preventDefault();
    }
  }, {passive: false});
  
  canvas.addEventListener('touchmove', function(e) {
    if (dragTarget) {
      handleMove(getTouchPos(e));
      e.preventDefault();
    }
  }, {passive: false});
  
  canvas.addEventListener('touchend', handleUp);
  canvas.addEventListener('touchcancel', handleUp);
  
  // Interactive UI functionality
  const aiIdeasPool = [
    "Incredible Aesthetic!", "Future is Here", "Mind Blowing Spark",
    "Generative Masterpiece", "Epic Innovation", "Next Gen Vision!",
    "Stunning UI Option", "Creative Canvas", "Simply Beautiful", 
    "Unleash Creativity"
  ];
  
  controls.querySelector('#addBtn').addEventListener('click', () => {
    const input = controls.querySelector('#newText');
    if (input.value.trim() !== '') {
      texts.push({ 
        text: input.value, 
        x: canvas.width / 2 - 50, 
        y: canvas.height / 2 
      });
      input.value = '';
      draw();
    }
  });
  
  controls.querySelector('#aiBtn').addEventListener('click', () => {
    const randomIdea = aiIdeasPool[Math.floor(Math.random() * aiIdeasPool.length)];
    texts.push({ 
      text: randomIdea, 
      x: Math.random() * (canvas.width * 0.5), 
      y: Math.random() * (canvas.height * 0.8) 
    });
    draw();
  });
  
  return container;
}