0

Tengo una función en PHP que me recibe como parámetro el ID de un equipo al cuál quiero mostrar la imagen de éste en un modal en la vista. para ello tengo un ancor:

<a href="#!" onclick="vimg(<?= $value['id_equipo'] ?>)" class="btn btn-info btn-xs btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="Imagen Equipo"><i class="material-icons">assignment_ind</i> </a>

El cual me ejecuta la función js "vimg", donde se ejecuta el siguiente código:

function vimg(sipi){
    $.ajax({
        type: "POST",
        url: uri+"equipos/ImgnEquipo/" + sipi,
        dataType: "json",
    }).done(function (response) {
        $("#MdlEqpo").append($("<img />").attr('src', 'data:image/png;charset=utf8;base64,' + response.imagen_equipo));
    })
    $("#ModalEquipo").openModal();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Pero no me muestra ninguna imagen, me sale esto la conso: image PGJyIC8+CjxiPldhcm5pbmc8L2I+OiAgaW1hZ2VwbmcoKSBleHBlY3RzIHBhcmFtZXRlciAxIHRvIGJlIHJlc291cmNlLCBhcnJheSBnaXZlbiBpbiA8Yj5DOlx4YW1wcFxodGRvY3NcZ2VzdGlvblxhcHBsaWNhdGlvblxjb250cm9sbGVyXGVxdWlwb3MucGhwPC9iPiBvbiBsaW5lIDxiPjU1PC9iPjxiciAvPgo= y en el inspector me muestra ésto: data:image/png;charset=utf8;base64,undefined alguna idea con la que me puedan colaborar?, mil gracias.

2
  • Y si pasas el contenido de tu BLOB a base64 y lo envias por ajax??? Commented el 7 dic. 2018 a las 17:19
  • Hola @DarielRamosDíazdeVillegas, de hecho eso mismo es lo que intenté en la función que tengo en PHP.. es algo así: ob_start(); imagepng($ignm); $imgMia = ob_get_contents(); ob_clean(); $results = array( 'image' => base64_encode($imgMia) ); $json = json_encode($results); echo $json;
    – Candelo
    Commented el 7 dic. 2018 a las 17:22

1 respuesta 1

0

Tal vez esto te ayude compañero. Es laravel pero te puede dar una idea de lo que intentas conseguir (seguro te interesa más la parte de ajax):

Laravel:

<?php
public function exportarCuentasIndividuales(Request $request)
{
   try{
        //siempre para actualizar debe existir el id de registro
        $cuentas = Cuenta::select(
            'tipos_cuentas.desc_tipo_cuenta as desc_tipo_cuenta',
            DB::raw("concat(cuentas.usuario_cuenta, '|', cuentas.contra_cuenta) as detalles_cuenta")
            )
            ->join('tipos_cuentas', 'cuentas.id_tipo_cuenta', '=', 'tipos_cuentas.id_tipo_cuenta')
            ->whereNotNull('cuentas.id_cuenta')
            ->where('cuentas.id_cliente', Auth::user()->id)
            ->orderBy('cuentas.id_cuenta', 'asc')
            ->get();

        $nombre_usuario = Auth::user()->name;
        $fecha = date("Y-m-d_(h_i_s_a)");
        $nombre_archivo = $nombre_usuario . '_' . $fecha . '.txt';

        $content = '=== I N F O ===' . "\r\n";
        $content .= 'Usuario: ' . $nombre_usuario . "\r\n";
        $content .= 'Exportación: ' . date("Y-m-d (h:i:s a)") . "\r\n";
        $content .= '=== ACCESOS ===' . "\r\n";

        if ($cuentas->isEmpty()) {
                $content .= 'NO HAY CUENTAS GENERADAS'."\r\n";
                $content .= 'POR ESTE USUARIO'."\r\n";
                $content .= '==============='."\r\n";
        }else{
            foreach ($cuentas as $cuenta) {
                $content .= 'Tipo de cuenta: '.$cuenta->desc_tipo_cuenta."\r\n";
                $content .= 'Info de cuenta: '.$cuenta->detalles_cuenta."\r\n";
                $content .= '===============' . "\r\n";
            }                    
        }

        $content .= '---REALIZADO---';

        $headers = [      
            'Content-type' => 'text/plain', 
            'Content-Disposition' => sprintf('attachment; filename="%s"', $nombre_archivo),
            'code'=>'200',
            'status'=>'success',
            'message'=> 'Cuenta obtenida'
        ];

        return response($content)->withHeaders($headers);

    } catch (\Exception $e) { 

        return response()->json([

            'code'=>'500',
            'status'=>'error',
            'details' => array(
                $e//'Error obteniendo cuentas. Recarge la página y reintente nuevamente o consulte al servicio de soporte.'
            )], 500);
    } 
}

JQuery ajax:

// exportar registros individuales
$('#modalFrmExportarCuentasIndividuales').on('click', '#btn_exportarCuentasIndividuales', function(event) {
    toastr.remove();        
    event.preventDefault();
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'post',
        xhrFields: {
            responseType: 'blob' // ESTA PARTE HACE LA MAGIA 
        },
        //dataType: 'text',            
        url: '{{ route("mis-cuentas.exportarCuentasIndividuales") }}',
        data: {
            '_token': $('input[name=_token]').val(),
        },
        beforeSend: function () {
            $('#modalFrmExportarCuentasIndividuales .btn-submit-frm').find('span.btn-texto').text('Espere...');
            $('#modalFrmExportarCuentasIndividuales .btn-submit-frm').find('i').removeClass('fa-arrow-circle-down').addClass('fa-sync-alt fa-spin-custom');
            $('#modalFrmExportarCuentasIndividuales :input').prop('disabled', true);
        },
        complete: function () {
            $('#modalFrmExportarCuentasIndividuales .btn-submit-frm').find('span.btn-texto').text('Exportar');
            $('#modalFrmExportarCuentasIndividuales .btn-submit-frm').find('i').removeClass('fa-sync-alt fa-spin-custom').addClass('fa-arrow-circle-down');
            $('#modalFrmExportarCuentasIndividuales :input').prop('disabled', false);
        },             
        success: function(response) {

            $('#modalFrmExportarCuentasIndividuales').modal('hide');

            var a = document.createElement('a');
            var url = window.URL.createObjectURL(response);
            a.href = url;
            a.download = 'info_cuentas_'+moment().format('YYYY-MM-DD_(hh_mm_a)')+'.txt';
            a.click();
            window.URL.revokeObjectURL(url);        

            toastr.success(response.details, 'Hecho', { timeOut: 5000 });
        },
        error: function (jqXHR) {
            var status = jqXHR.status;
            var status_text = jqXHR.statusText;
            var response = jqXHR.responseJSON;
            var errors = [];
            console.log(jqXHR);
            console.log(jqXHR.responseText);
            alert(response);
            switch (status) {
            case 0:
                errors = ['Sin conexión a internet. Verifique la conexión, recarge la página y reintente nuevamente o consulte al servicio de soporte.'];
                break;
            case 404:
                if (typeof response === 'undefined') {
                    errors = ['Error ' + status + ': ' + status_text + '. Recarge la página y reintente nuevamente o consulte al servicio de soporte.'];
                } else {
                    errors = ['Error ' + status + ': ' + response.details + '. Recarge la página y reintente nuevamente o consulte al servicio de soporte.'];
                }
                break;
            default:
                errors = ['Error ' + status + ': ' + status_text + '. Recarge la página y reintente nuevamente o consulte al servicio de soporte.'];
            }
            toastr.error(errors, 'Error', {
                newestOnTop: true,
                preventDuplicates: true,
                timeOut: 10000,
                closeButton: true
            }).css('width', '440px');
        }          
    });
}); 

Solo ignora las partes del toastr, momentjs y los modales.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.