Php：从mysql服务器拖动图像到画布不能用于编辑 [英] Php: dragging images into canvas from the mysql server cannot be used for editing
问题描述
我在console.log中有这样的错误：
未捕获TypeError：无法在HTMLDivElement.handleDrop上读取null的属性'width'
在这个过程中，我通过使用下拉列表过滤图像数据并在div元素中查看它。我对此没有任何问题，但仅限于在画布中使用它。
我不知道为什么会发生这种情况，但它可能与在服务器中获取图像有关。提前感谢您的时间和精力。
这是我制作的流程：
1.创建一个函数，在没有页面重新加载的情况下将数据提取到服务器，并使用PHP-AJAX重定向页面。这是HTML头元素中的位置。来自W3schools.com的PHP类别源代码
I have this error in the console.log which says:
Uncaught TypeError: Cannot read property 'width' of null at HTMLDivElement.handleDrop
In this process I access the images data by filtering it using a drop-down list and view it in the div element. I have no problem with this but only when using it in the canvas.
I do not have any idea why this is happening but it may have something to do with fetching images in the server. Thanks in advance for your time and effort.
THIS IS THE PROCESS I HAVE MADE:
1. Creating a function to fetch data to server without page reloading and redirecting the page using PHP-AJAX. this is place in the HTML head element. Source code from W3schools.com on PHP category
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getImage.php?q="+str,true);
xmlhttp.send();
}
</script>
2.将函数放在表单元素内的select元素中。它放在身体元素内部
2. Placing the function in the select element inside the form element. This is placed inside the body element
<form>
<select id = "objects" name="users" onchange="showUser(this.value)">
<option value="">Select Category</option>
<option value="City">City</option>
<option value="Animals">Animals</option>
<option value="Town">Town</option>
<option value="Home">Home</option>
<option value="Park">Park</option>
</select>
</form>
3.在正文中创建一个div来放置目标路径，以便从数据库中查看图像结果
3. Creating a div inside the body to place the target path for viewing images from database result
<div class = "images"><div class = "a" id="txtHint">Image Category</div></div>
4.这是getImage.php代码从数据库中获取数据
4. This is the getImage.php code for fetching data from database
<?php
$query = mysqli_connect("localhost","root","","imagecategory");
// Check connection
if (mysqli_connect_errno()){echo "Failed to connect to MySQL: " . mysqli_connect_error();}
mysqli_select_db($query, 'imgDropdown');
$q = $_GET['q'];
$sql="SELECT * FROM tbl_uploadimg WHERE imgCategory = '".$q."'";
$result2 = mysqli_query($query,$sql);
while($row = mysqli_fetch_array($result2)) {
echo '<img draggable="true" src="uploads/'.$row["imgUrl"].'">';
}
mysqli_close($query);
?>
5.最后这是我的sql代码的图片。数据库名称：表格上的imageCategory tbl_uploadimg
5. lastly this is the picture of my sql code. Database name: imageCategory on table tbl_uploadimg
<img alt="IMG example" src="https://ibb.co/mcnMSb" />
我尝试过：
抱歉，遗憾的是我没有任何解决方案
What I have tried:
Sorry but unfortunately I do not have any solution on this
推荐答案
query = mysqli_connect（localhost，root，，imagecategory ）;
//检查连接
if（mysqli_connect_errno（））{echo无法连接到MySQL：。 mysqli_connect_error（）;}
mysqli_select_db（
query = mysqli_connect("localhost","root","","imagecategory"); // Check connection if (mysqli_connect_errno()){echo "Failed to connect to MySQL: " . mysqli_connect_error();} mysqli_select_db(
query，'imgDropdown'）;
query, 'imgDropdown');
q =
这篇关于Php：从mysql服务器拖动图像到画布不能用于编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
