не может включать обработку. js эскиз для использования и отображения изображений базы данных phpmyadmin - PullRequest
Новая
       64

не может включать обработку. js эскиз для использования и отображения изображений базы данных phpmyadmin

0 голосов
/ 09 марта 2020

У меня есть сайт, написанный на PHP, с базой данных через MySQL и PHPMyAdmin. Я пытаюсь использовать эскиз обработки, чтобы применить эффекты к изображениям, которые пользователи загружают в свою учетную запись. Я включил файл базовой обработки. js, но эскиз не появится на моем сайте. Изменить: Я также все запускаю локально с XAMPP.

Это структура файла в базе данных:

phplogin (база данных)> account (таблица), которая содержит: 

id username password    email          upload 
1  test     (encrypted) test@test.com  [test.png]

Это скетч Обработки, который я взял из учебника, чтобы попытаться отобразить изображения, поэтому он, скорее всего, ошибочен: 

MySQL msql;
import de.bezier.data.sql.*;
import de.bezier.data.sql.mapper.*;

String dbHost = "localhost"; 
String dbPort = ""; 
String dbUser = "root"; 
String dbPass = "";  
String dbName = "phplogin";
String tableName = "accounts"; 

PImage displayimg;


void setup()
{
  msql = new MySQL( this, dbHost + ":" + dbPort, dbName, dbUser, dbPass );

  if (msql.connect()) {
    // get number of rows
    msql.query("SELECT COUNT(*) FROM " + tableName);
    msql.next();
    println("Number of rows: " + msql.getInt(1));
    println();

    // access table
    msql.query("SELECT * FROM " + tableName);
    while (msql.next()){
      // replace "first_name" and "last_name" with column names from your table
      String s1 = msql.getString("username");
      String s2 = msql.getString("upload");
      println(s1 + " " + s2);
    }

 }
  size (400, 300);
  displayimg = loadImage(".$upload");
}

void draw()
{
   image (displayimg, 0, 0);
   tint(255, 127);
   image (displayimg, 0, 0);
}

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

<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
    header('Location: index.html');
    exit();
}
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
?>
<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <meta charset="utf-8">
        <title>Home</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body class="loggedin">
        <nav class="navtop">
            <div>
                <h1>imagine</h1>
                <a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
                <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
            </div>
        </nav>
        <div class="content">
            <h2>Colaborative Art Project</h2>

            <p>Welcome, <?=$_SESSION['name']?>! Upload an image and take a look at the art piece you've contributed to:</p>
            <?php
            include("upload.php");
            ?>          
        </div>

        <?php $dir='images/';
        $img = "SELECT upload FROM accounts";

        $result = $con ->query ($img) or die ($con -> error);
        while ($row = $result ->fetch_assoc ())
        {
            $int_image = $row["upload"];
        } ?>

        <script type ="text/javascript" src="processing.js"></script>

        <canvas id ="imagine" data-processing-sources="imagine.pde"></canvas>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    </body>
</html>

Если кто-нибудь может указать, как я могу сделать эта работа на уровне чуть-чуть, чтобы я мог поэкспериментировать с обработкой эффектов изображения с загружаемыми пользователями изображениями, это было бы здорово. Идея состоит в том, чтобы отображать изображения друг на друге на главной странице, чтобы сделать художественное произведение с цветным рисунком. Если вы собираетесь порекомендовать P5 js, пожалуйста, сделайте так, чтобы я мог реализовать это просто. Благодаря.

1 Ответ

0 голосов
/ 14 апреля 2020

Вы пытаетесь использовать технологию на стороне клиента (Обработка Java / Обработка. js / p5. js) на стороне сервера с точки зрения внешнего вида и смешивания языков на этом пути.

Если вы хотите, чтобы пользователи загружали изображения на сервер, а затем на этот сервер, чтобы создать коллаж, этот коллаж необходимо будет внедрить на стороне сервера.

Учитывая, что вы используете PHP, у вас есть несколько (в основном встроенные) доступные опции:

  • для базового c коллажа, который вы можете использовать ImageMagick : монтаж может быть довольно полезным
  • Если вы хотите также рисовать фигуры (например, прямоугольники / эллипсы / дуги / линии / et c. A-la Processing), посмотрите библиотеку php GD

Возможно, вы захотите иметь скрипт, который в течение определенного периода времени рендерит новый фрагмент коллажа / коллаборации, чтобы он кэшировался и поддерживал работу сервера. Это составное изображение можно просто загрузить, когда пользователи захотят его просмотреть.

...