不能包含 processing.js 草图以使用和显示 phpmyadmin 数据库图像答案

【问题标题】：can't include processing.js sketch to use and display phpmyadmin database images不能包含 processing.js 草图以使用和显示 phpmyadmin 数据库图像
【发布时间】：2020-03-09 18:22:56
【问题描述】：

我有一个用 PHP 编写的站点，其中包含一个通过 MySQL 和 PHPMyAdmin 的数据库。我正在尝试使用处理草图对用户上传到他们帐户的图像应用效果。我已包含基本 processing.js 文件，但草图不会出现在我的网站上。编辑：我还使用 XAMPP 在本地运行所有内容。

这是数据库上的文件结构：

phplogin（数据库）> 帐户（表格），其中包含：

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);
}

这是通过 processing.js 包含草图的 php 代码，以及仅通过 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>

如果有人能指出我如何在准系统级别上进行这项工作，以便我可以使用用户上传的图像处理图像效果，那就太好了。这个想法是在主页上将图像彼此叠加显示以制作协作艺术作品。如果您要推荐 P5js，请以我可以简单实施的方式进行。谢谢。

【问题讨论】：

您是要在客户端还是在服务器上运行您的处理代码？ Processing.js 仅适用于客户端，但您使用的代码仅适用于服务器端。
哦，我不知道。我正在通过 XAMPP 在本地运行数据库到 PHPMyAdmin，如果这很重要，那么任何地方都不会上传任何内容。究竟哪一部分只为服务器端编码？ @KevinWorkman
将 NodeJS 与 PHP 混合有什么意义？
另外请注意，Processing.js 早在 2018 年 12 月就停产了，但即使在那时，它也绝对无法运行任何带有 import 语句的代码（因为 JS 不理解编译java字节码）。

标签： php mysql phpmyadmin processing processing.js

【解决方案1】：

从外观上看，您正在尝试在服务器端使用客户端技术（Processing Java / Processing.js / p5.js ），并在此过程中混合多种语言。

如果您希望用户将图像上传到服务器，然后该服务器创建拼贴，则需要在服务器端实现该拼贴。

鉴于您使用的是 PHP，您可以使用一些（大部分是内置的）选项：

对于基本拼贴，您可以使用 ImageMagick：montage 可能非常有用
如果您还想绘制形状（例如矩形/椭圆/弧线/线条/等等。a-la 处理）请查看php GD library

您可能希望有一个脚本在一段时间内呈现一个新的拼贴/协作作品，以便将其缓存并保持服务器满意。当用户想要查看此合成图像时，可以简单地下载它。

【讨论】：