点击放大图片并在新页面中显示答案

【问题标题】：enlarge image on click and show them in new page点击放大图片并在新页面中显示
【发布时间】：2022-01-31 23:39:38
【问题描述】：

我创建了一个数据库，其中存储了所有图像的路径。我现在可以检索它们并将它们显示在缩略图中。我现在想要的是单击它们并重定向到一个新的 php 页面，我在其中放大了图像。我需要这个才能对图像进行注释并将注释存储在数据库中。您认为我应该将图像放在 Canvas 中吗？你能建议如何进行吗？任何帮助将不胜感激。

<?php
  
require('db.php');

if (isset($_POST['mostra'])) {
    
    $batch_number = stripslashes($_REQUEST['batch_number']);
    $batch_number = mysqli_real_escape_string($con, $batch_number);
    $product_name = stripslashes($_REQUEST['product_name']);
    $product_name = mysqli_real_escape_string($con, $product_name);
    $vial_size = stripslashes($_REQUEST['vial_size']);
    $vial_size = mysqli_real_escape_string($con, $vial_size);
    $Sterile = $_POST['Sterile'];
    $Macchina = $_POST['Macchina'];
    
    $select = mysqli_query($con, "SELECT vial_image FROM info_flaconi WHERE batch_number = '$batch_number' AND Macchina = '$Macchina' OR product_name = '$product_name' OR vial_size = '$vial_size' OR Sterile_Area = '$Sterile'");
    if(mysqli_num_rows($select)) {
        
            while($row=$select->fetch_assoc()){
                
                
                echo '<tr>
                <td><a href="annotazione.php"><img src="immagini/'.$row['vial_image'].'" style = "width:100px; height:100px; position: relative; top: 70px;"></a></td>
                </tr>';    
               
            }    
        
    }   else{
            echo '<p style="color: white;"> No data available </p>';
        }      
}  

?>


</header>

</body>
           
</html>

<?php

include("auth_session.php");
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Import Immagini</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style_3.css">
 
</head>
<body>
<header>
    
        <div class="logo">
            <img src="biotech.png" alt="">
        </div>
    
    <ul class="nav-area">
    <li><a href="dashboard.php">Home</a></li>
    <li><a href="table/index.html">Contatti</a></li>
    <li><a href="logout.php">Logout</a></li>
</a>
</a>
    </ul>   
    <div class = "caricamento">
    <form action="" method="POST" enctype="multipart/form-data">
            
            <label> carica immagini flaconi: </label>
           

                        
         
            <label> Inserisci numero batch: </label><input type = "text" name= "batch_number" placeholder="batch number">                 
                        
            <label> Inserisci prodotto: </label><input type = "text" name= "product_name" placeholder="product name">
                                             
            <label> Inserisci grandezza flacone: </label><input type = "text" name= "vial_size" placeholder="vial size">
                       
            <input type="submit" name="mostra" value="Mostra flaconi">
            <select name= "Sterile">
                <option value="" >--Select--</option>
                <option value="Sterile Area 1" >Sterile Area 1</option>
                <option value="Sterile Area 2" >Sterile Area 2</option>
                <option value="Sterile Area 3" >Sterile Area 3</option>
                <option value="Sterile Area 4" >Sterile Area 4</option>
                <option value="Sterile Area 5" >Sterile Area 5</option>
                <option value="Sterile Area 6" >Sterile Area 6</option>
                <option value="PDS" >PDS</option>
            </select>
            
            <select name= "Macchina">
                <option value="" >--Select--</option>
                <option value="Sedeneider" >Sedeneider</option>
                <option value="Groheninger" >Groheninger</option>
                <option value="Optrel400" >Optrel400</option>
            </select>      
    </div>            
    </form>

【问题讨论】：

“你认为我应该将图像放在 Canvas 中吗？” - 你想对图像进行任何类型的操作吗？如果不是，那么与简单地通过img 元素显示图像相比，使用画布有什么优势？
我实际上需要在图像显示在其他页面上后对图像进行注释

标签： javascript php html database html5-canvas

【解决方案1】：

我稍微详细说明了@CBroe 的评论。目前，您正在从数据库中检索全尺寸图像的 URL，并生成一个 html 表，其中每个图像都以 100x100 的固定大小呈现。

echo '<tr> <td > < a href = "annotazione.php" > < img src = "immagini/'.$row['vial_image'].'" style = "width:100px; height:100px; position: relative; top: 70px;" > < /a></td></tr>';

由于您已经拥有正确的 URL，因此您只需在用户单击缩略图后立即在当前浏览器窗口中打开此 URL。可以通过将onclick="window.open(this.src)" 处理程序添加到<img> 元素来捕获单击事件。例如

echo '<tr> <td> <a href = "annotazione.php" > <img onclick="window.open(this.src)" src = "immagini/'.$row['vial_image'].'" style = "width:100px; height:100px; position: relative; top: 70px;"> </a></td></tr>';

【讨论】：

这行得通，但是当我真正想在 annotation.php 上显示图像时，它实际上会打开一个新窗口，我可以在其中绘制某种矩形，其中有小瓶的缺陷，然后制作一个注释。