Chat with us, powered by LiveChat
← Return to MyDisct Solver

Slide CAPTCHA Image Solving

Solve slide puzzle captchas with precise coordinate calculation. Slide CAPTCHAs require moving puzzle pieces to correct positions with 99.2% accuracy.

What is Slide CAPTCHA Image?

Slide CAPTCHAs present a puzzle where users must slide a puzzle piece to fit into a cutout in the background image. The challenge requires precise coordinate calculation to position the puzzle piece correctly to complete the image.

Captcha Type

Use the following captcha type identifier in your API requests: 

"type": "SLIDE_CAPTCHA_IMAGE"

Request Format

POST /createTask

Request Parameters

Parameter Type Required Description
auth.token string required Your API key
captcha.type string required Must be "SLIDE_CAPTCHA_IMAGE"
captcha.metadata.siteUrl string required The URL where the captcha appears
captcha.payload.images array required Array of base64-encoded images [Background, Puzzle Piece]

Example Request

JavaScript 
const response = await fetch('https://solver-api.mydisct.com/createTask', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'apikey': 'YOUR_API_KEY'
  },
  body: JSON.stringify({
    auth: {
      token: 'YOUR_API_KEY'
    },
    context: {
      source: 'api',
      version: '1.0.0'
    },
    captcha: {
      type: 'SLIDE_CAPTCHA_IMAGE',
      metadata: {
        siteUrl: 'https://example.com'
      },
      payload: {
        images: [
          'background_image_base64',
          'puzzle_piece_base64'
        ]
      }
    }
  })
});

const data = await response.json();
console.log('Task ID:', data.task.id);

Response Format

Create Task Response (Processing)

{
  "success": true,
  "service": "MyDisct Solver",
  "message": "Task created successfully",
  "task": {
    "id": "MyDisctSolver_slide123abc456",
    "status": "processing",
    "timestamp": "2025-11-21T10:00:00.000Z"
  }
}

Fetch Result Response (Processing)

{
  "success": true,
  "service": "MyDisct Solver",
  "task": {
    "id": "MyDisctSolver_slide123abc456",
    "status": "processing",
    "timestamp": "2025-11-21T10:00:00.000Z"
  }
}

Fetch Result Response (Completed)

{
  "success": true,
  "service": "MyDisct Solver",
  "message": "Captcha solved successfully",
  "task": {
    "id": "MyDisctSolver_slide123abc456",
    "status": "completed",
    "result": {
      "answers": [150, 0],
      "timestamp": "2025-11-21T10:00:03.000Z"
    }
  }
}
Understanding the Response

The answers array contains [x, y] coordinates. For slide captchas, this indicates the horizontal distance (x) the puzzle piece needs to move to fit correctly. The y coordinate is typically 0 for horizontal slides.

Implementation Guide

Step 1: Extract Images

// Get the background and puzzle piece images
const backgroundImage = document.querySelector('.slide-captcha-bg img');
const puzzlePiece = document.querySelector('.slide-captcha-piece img');

const bgCanvas = document.createElement('canvas');
const bgCtx = bgCanvas.getContext('2d');
bgCanvas.width = backgroundImage.naturalWidth;
bgCanvas.height = backgroundImage.naturalHeight;
bgCtx.drawImage(backgroundImage, 0, 0);
const bgBase64 = bgCanvas.toDataURL('image/png').split(',')[1];

const pieceCanvas = document.createElement('canvas');
const pieceCtx = pieceCanvas.getContext('2d');
pieceCanvas.width = puzzlePiece.naturalWidth;
pieceCanvas.height = puzzlePiece.naturalHeight;
pieceCtx.drawImage(puzzlePiece, 0, 0);
const pieceBase64 = pieceCanvas.toDataURL('image/png').split(',')[1];

Step 2: Send to API and Poll

async function solveSlideCaptcha(siteUrl, backgroundBase64, puzzleBase64) {
  const createResponse = await fetch('https://solver-api.mydisct.com/createTask', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'apikey': 'YOUR_API_KEY'
    },
    body: JSON.stringify({
      auth: { token: 'YOUR_API_KEY' },
      context: { source: 'api', version: '1.0.0' },
      captcha: {
        type: 'SLIDE_CAPTCHA_IMAGE',
        metadata: { siteUrl },
        payload: {
          images: [backgroundBase64, puzzleBase64]
        }
      }
    })
  });

  const createData = await createResponse.json();
  if (!createData.success) throw new Error(createData.error.message);

  const taskId = createData.task.id;

  while (true) {
    await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds

    const resultResponse = await fetch('https://solver-api.mydisct.com/fetchResult', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'apikey': 'YOUR_API_KEY'
      },
      body: JSON.stringify({ taskId })
    });

    const resultData = await resultResponse.json();
    if (resultData.task.status === 'completed') {
      return resultData.task.result.answers;
    } else if (resultData.task.status === 'failed') {
      throw new Error('Slide captcha solving failed');
    }
  }
}

Step 3: Apply Solution

// Usage
async function handleSlideCaptcha() {
  const bgBase64 = getBackgroundImageBase64();
  const pieceBase64 = getPuzzlePieceBase64();
  const answers = await solveSlideCaptcha(window.location.href, bgBase64, pieceBase64);

  const [slideDistance, yOffset] = answers;

  const slider = document.querySelector('.slide-captcha-slider');
  const sliderTrack = document.querySelector('.slide-captcha-track');

  const trackWidth = sliderTrack.offsetWidth;
  const sliderWidth = slider.offsetWidth;
  const maxSlide = trackWidth - sliderWidth;

  const moveDistance = Math.min(slideDistance, maxSlide);
  slider.style.left = moveDistance + 'px';

  const verifyButton = document.querySelector('.slide-verify-button');
  verifyButton.click();
}

Python Example

Python 
import requests
import base64
import time

def solve_slide_captcha(site_url, background_path, puzzle_path, api_key):
    """Solve slide captcha challenge"""
    # Step 1: Convert images to base64
    with open(background_path, 'rb') as bg_file:
        bg_base64 = base64.b64encode(bg_file.read()).decode('utf-8')
    
    with open(puzzle_path, 'rb') as puzzle_file:
        puzzle_base64 = base64.b64encode(puzzle_file.read()).decode('utf-8')

    # Step 2: Create task
    create_response = requests.post(
        'https://solver-api.mydisct.com/createTask',
        headers={
            'Content-Type': 'application/json',
            'apikey': api_key
        },
        json={
            'auth': {'token': api_key},
            'context': {'source': 'api', 'version': '1.0.0'},
            'captcha': {
                'type': 'SLIDE_CAPTCHA_IMAGE',
                'metadata': {'siteUrl': site_url},
                'payload': {
                    'images': [bg_base64, puzzle_base64]
                }
            }
        }
    )

    create_data = create_response.json()
    if not create_data['success']:
        raise Exception(create_data['error']['message'])

    task_id = create_data['task']['id']
    print(f'Task created: {task_id}')

    # Step 3: Poll for result
    while True:
        time.sleep(2)  # Wait 2 seconds

        result_response = requests.post(
            'https://solver-api.mydisct.com/fetchResult',
            headers={
                'Content-Type': 'application/json',
                'apikey': api_key
            },
            json={'taskId': task_id}
        )

        result_data = result_response.json()
        if result_data['task']['status'] == 'completed':
            return result_data['task']['result']['answers']
        elif result_data['task']['status'] == 'failed':
            raise Exception('Slide captcha solving failed')

        print('Waiting for solution...')

# Example usage
answers = solve_slide_captcha(
    site_url='https://example.com/captcha',
    background_path='background.png',
    puzzle_path='puzzle_piece.png',
    api_key='YOUR_API_KEY'
)

# answers = [x, y]
x_distance, y_offset = answers
print(f'Slide puzzle piece {x_distance}px horizontally')
# Output: Slide puzzle piece 150px horizontally

Best Practices

  • Image Quality: Ensure both background and puzzle piece images are captured at full resolution
  • Image Separation: Send background and puzzle piece as separate images in the correct order
  • Polling Intervals: Use 2-3 second intervals between fetchResult requests
  • Coordinate Conversion: Convert image coordinates to slider position accurately
  • Slider Simulation: Use proper mouse events or CSS positioning for slider movement
  • Verification Trigger: Ensure you trigger the verification after moving the slider
  • Timeout Management: Set reasonable timeouts (max 30 seconds) for solving

Common Issues

Issue: Slider not moving to correct position

Solution: Ensure you're calculating the slider position based on the track width and slider dimensions. The coordinate returned is relative to the image, not the slider track.

Issue: Images not extracted correctly

Solution: Verify you're extracting both the background image and puzzle piece separately. Send them in the correct order: [background, puzzle piece].

Issue: Verification failing after slider move

Solution: Make sure you're triggering the verification event properly after moving the slider. Some implementations require specific mouse events or button clicks.

Next Steps

Ready to integrate slide captcha solving into your application? Check out our other image-based captcha solutions: