Question

我有一个数据库，其中有图像存储为LONGBLOB文件。我似乎无法弄清楚如何运输＆＃34;那些图像到 JS 文件，所以我可以检查它们的尺寸，并将它们与屏幕的尺寸进行比较。这是我如何下载图像：

function fillArrays(){
$idArray = array();
    $sql = "SELECT oglas_id,slika,prioriteta FROM deska WHERE deska.datumz <= CURRENT_DATE AND deska.datumk >= CURRENT_DATE;";
    $result = mysqli_query($GLOBALS['conn'],$sql);
    $resultCheck = mysqli_num_rows($result);
    if($resultCheck>0){
        while($row = mysqli_fetch_assoc($result)){
            array_push($GLOBALS['idArray'],$row['oglas_id']);
            $image = base64_encode($row['slika']);    // THIS        "slika" means "image" in my lang...
            array_push($GLOBALS['imgArray'],$image);        //AND THIS
            array_push($GLOBALS['prArray'],$row['prioriteta']);
        }
    }else{
        die("Oops there seems to be an error(arr)");
    }

}

我很确定SQL中的所有内容都是正确的。当我尝试将存储在数组中的图像转换为javascript时，问题就开始了。我试图通过 json_encode 来实现。

<script>
        var idArray = <?php echo json_encode($idArray) ?>;
        var imgArray = <?php echo json_encode($imgArray) ?>;
        var prArray = <?php echo json_encode($prArray) ?>;
    </script>
    <script src="includes/script.js"></script>

然后我们跳转到我的javascript文件（script.js）。现在，当我尝试输出所选图像的尺寸时，它会显示 undefined undefined （width * height）。这是我如何尝试消除所选图像的信息。在我的 JS 文件中：

var imgArray = window.imgArray;

var img = new Image();
img = imgArray[0];
img.width;
img.height;

我知道这些问题已被多次询问，但我似乎无法绕过它，所以我想我会向你提供我的具体问题。感谢任何帮助过的人。

因为我不认为人们完全明白：

网站的目标：

从数据库下载图片。
调整大小。（图片不能大于屏幕尺寸的一半）
将它们放在2x2表中。

Answer 1

您需要等待加载的图像。

img.onload = function () {
  alert(this.width + ' ' + this.height);
};

顺便说一句，如果您需要调整图像大小，为什么不将屏幕分辨率传递给PHP，然后在那里，您执行所有检查？它更容易，因为如果你从JS这样做，它取决于用户浏览器。

Answer 2

读取图像数据的代码：

function readURL(input) {
    console.log(input.files);
       if (input.files && input.files[0]) {
           var reader = new FileReader();
           //alert(input.files[0]);
           reader.onload = function (e) {

               $('#image_source').attr('src', e.target.result);
           }

           reader.readAsDataURL(input.files[0]);
       }
}

将获取的图像转换为base64：

var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("hidden_id").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);
    }
};

为图像输入类型添加侦听器：

if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('image_id').addEventListener('change', handleFileSelect, false);
} else {
    alert('The File APIs are not fully supported in this browser.');
}

希望它对你有所帮助。

将图像文件从php传递到javascript

2 个答案: