Question

我将图像作为Blob存储在mysql数据库中。提取并加载后，我得到了一个损坏的图像图标。也许JQuery Ajax有问题或内容不完整？

我该如何解决？

以下是相关页面的一些代码段：

编辑个人资料页面：

<!DOCTYPE html>
<html lang="en">
    <?php require 'inc/head.view.php'; //HEAD ?>
    <body>
        <?php include 'inc/navbar.view.php'; //NAVBAR ?>
        
        <div class="container">
            <div class="container__mod--1">
                <?php include 'inc/sidenav.view.php'; //SIDENAV ?>
            </div>
            <div class="container__mod--2">
                <?php include 'inc/userarea.view.php'; //USERAREA ?>
            </div>
            <div class="container__mod--3">
                <main class="p-rem1">
                    <form>
                        <div class="fgrp">
                            <button class="btn btn--primary change-image">Change Profile Image</button>
                        </div>
                        <div class="fgrp">
                            <label for="userBio">Bio</label>
                            <textarea name="userBio" id="userBio" class="textarea" value="<?= $userInfo->bio; ?>"></textarea>
                        </div>
                        <div class="fgrp">
                            <label for="userOccupation">Occupation</label>
                            <input type="text" class="text-input" id="userOccupation" value="<?= $userInfo->occupation; ?>">
                        </div>
                        <div class="fgrp">
                            <button class="btn btn--primary">Save Changes</button>
                        </div>
                    </form>
                </main>
            </div>
            <div class="container__mod--4">...</div>
        </div>

        <div class="changeImageModal">
            <div class="changeImageModal__main">
                <i class="fa fa-window-close changeImageModal__closeBtn"></i>
                <div class="changeImageModal__content">
                    <h2>Change Image</h2>
                    <form>
                        <div id="imgcontainer">

                        </div>
                        <input type="file" id="new-image" accept="image/*">
                        <div class="fgrp">
                            <button type="submit" id="crop-and-save" class="btn btn--primary">Crop and Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <script src="assets/scripts/toggleNav.js"></script>
        <script src="assets/scripts/toggleSidenav.js"></script>
        <script src="assets/scripts/toggleUserArea.js"></script>
        <script src="assets/scripts/croppie.js"></script>
        <script>
            // document.querySelector('.change-image').addEventListener('click',function(){


            // });

            var el = document.querySelector('#imgcontainer');
            var c = new Croppie(el, {
                viewport: { width: 150, height: 150, type : 'circle' },
                boundary: { width: 300, height: 300 },
                showZoomer: false,
                enableOrientation: true
            });

           document.querySelector('#new-image').addEventListener('change',function(){

               var reader = new FileReader();

               reader.onload = function(e){
                   c.bind({
                       url : event.target.result
                   })

               }
               reader.readAsDataURL(this.files[0]);

           });

           document.querySelector('#crop-and-save').addEventListener('click',function(e){
               e.preventDefault();

               c.result({
                   type : 'canvas', 
                   size: 'viewport'
               }).then(function(blob){
                   $.ajax({
                       url:'../proc/insertProfilePic.php', 
                       type : 'POST',
                       data : {
                           'image' : blob
                       }, 
                       success : function(data){

                           console.log(data);

                       }
                   });

               });

           });

        </script>
    </body>
</html>

插入图像文件

 if(!isset($uid)){
     die();
 }

 if(!isset($_POST['image'])){
     die();
 }

 $user = new User($pdo);

 $imgData = $_POST['image'];

 $imageArray1 = explode(';',$imgData);

 $imageArray2 = explode(',',$imageArray1[1]);

 $data = base64_decode($imageArray2[1]);

 $imageName = time() . '.png';

 file_put_contents($imageName,$data);

 $imageFile = addslashes(file_get_contents($imageName));

 $user->insertProfilePic($uid, $imageFile);

 echo $data;

 unlink($imageName);

个人资料查看页面

<!DOCTYPE html>
<html lang="en">
    <?php require 'inc/head.view.php'; //HEAD ?>
    <body>
        <?php include 'inc/navbar.view.php'; //NAVBAR ?>
        
        <div class="container">
            <div class="container__mod--1">
                <?php include 'inc/sidenav.view.php'; //SIDENAV ?>
            </div>
            <div class="container__mod--2">
                <?php include 'inc/userarea.view.php'; //USERAREA ?>
            </div>
            <div class="container__mod--3">
                <main>
                    <!--Page content goes here-->

                    <img src="data:image/png;base64,<?= base64_encode($profile->profileImage); ?>"></img>






                </main>
            </div>
            <div class="container__mod--4">...</div>
        </div>

        <!-- Scripts -->
        <script src="assets/scripts/toggleNav.js"></script>
        <script src="assets/scripts/toggleSidenav.js"></script>
        <script src="assets/scripts/toggleUserArea.js"></script>
    </body>
</html>

结果（左上方的制动图像）

Croppie base64图像损坏

0 个答案: