Блог

Главная - Вопросы по программированию - Повреждено изображение Croppie base64

Повреждено изображение Croppie base64

#php #base64 #croppie

#php #base64 #обрезка

Вопрос:

Я сохраняю изображение в виде большого двоичного объекта в базе данных 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>

Результат (поврежденное изображение вверху слева)

Значок поврежденного изображения

Комментарии:

1. кстати: я бы рекомендовал поискать, для чего это addslashes() и почему это НЕПРАВИЛЬНО вызывать в контексте баз данных

2. На самом деле, это был мой ответ, который мне был нужен. Удаление этого исправило проблему. Однако качество изображения оставляет желать лучшего, но это может не иметь никакого отношения к моему коду. Большое вам спасибо!