5
En este caso se usará CDN para que sea mejor1 - En tema/templates/modules/m.cuenta_sidebar.tpl y reemplazamos todo por esto
Código: ( Seleccionar Todo )
<div class="sidebar-tabs clearbeta">
<h3>Mi Avatar</h3>
<div class="avatar-big-cont">
<div style="display: none" class="avatar-loading"></div>
<img width="120" height="120" alt="" src="{$tsConfig.url}/files/avatar/{if $tsPerfil.p_avatar}{$tsPerfil.user_id}_120{else}avatar{/if}.jpg?t={$smarty.now}" class="avatar-big" id="avatar-img"/>
</div>
<ul class="change-avatar" id="change">
<li class="local-file" id="pc" style="width: 50%;text-align:center;"><span>Local</span></li>
<li class="url-file" id="url" style="width: 50%;text-align:center;"><span>Url</span></li>
</ul>
<div class="clearfix"></div>
<a href="javascript:avatar.subir()" class="avatar-next edit" >Editar</a>
</div>
<div class="clearfix"></div>
<link rel="stylesheet" href="Registrate o inicia tu sesión para ver este contenido@2.3.1/dist/croppr.min.css" integrity="sha256-Bbkel8+0sOmrvX75oDwNElgbmrAP+Pw+XXKKUwoKiVE=" crossorigin="anonymous">
<script src="Registrate o inicia tu sesión para ver este contenido@2.3.1/dist/croppr.min.js" integrity="sha256-VPADQYvd0gjLaeduvmP9/UZAdNW3D2sJieeJ3a3PX64=" crossorigin="anonymous"></script>
<script src="{$tsConfig.js}/subir-avatar.js?{$smarty.now}"></script>2 - Creamos un archivo llamado "subir-avatar.js" y lo agregamos en tema/js 12.04.2024
Código: ( Seleccionar Todo )
const next = $(".avatar-next");
const sizeImg = 120;
function cambiarFile(){
const input = $('#file-avatar')[0];
if(input.files && input.files[0]) {
let name_file = decodeURIComponent(input.files[0].name);
document.querySelector(".drop-message").innerHTML = name_file;
next.removeClass('btn-disabled')
}
}
$("#url-avatar").on('keyup', () => {
if($("#url-avatar").val().length > 5) next.removeClass('btn-disabled')
})
$("#change > li, #change > li span").on('click', event => {
const block = $("#change")
block.attr('class', '')
var tipo = event.target.textContent
if(tipo === 'Local') {
block.html(`<div id="drop-region">
<input type="file" name="local" id="file-avatar" onchange="return cambiarFile();" class="browse"/>
<div class="drop-message">
Arrastra y suelta la imagen o haz clic para subir
</div>
</div>`)
} else {
block.html(`<div style="margin: 0 auto 10px auto;">
<input type="text" name="url" autocomplete="off" id="url-avatar" placeholder="Url de la imagen" class="browse form-control"/>
</div>`)
}
})
var avatar = {
size: 120,
uid: false,
key: false,
ext: false,
informacion: '',
current: false,
success: false,
subir: async () => {
$(".avatar-loading").show().css('display', 'flex');
inputs = [].slice.call(document.querySelectorAll(".browse"))
inputs.forEach(input => {
const datoUrl = new FormData();
datoUrl.append('url', (input.name == 'url') ? input.value : input.files[0])
if(!empty(input.value)) {
fetch(global_data.url + '/upload-avatar.php', {
method: 'POST',
body: datoUrl
})
.then(response => response.json())
.then(blobData => {
avatar.subida_exitosa(blobData)
});
}
})
},
subida_exitosa: rsp => {
if (rsp.error == 'success') avatar.success = true;
else if (rsp.msg) {
avatar.key = rsp.key;
avatar.ext = rsp.ext;
avatar.cortar(rsp.msg);
} else cuenta.enviar_alerta(rsp.error, 0);
$(".avatar-loading").hide();
},
cortar: img => {
img = img + '?t=' + new Date();
mydialog.show(true);
mydialog.title("Cortar avatar");
mydialog.body(`<img class="avatar-cortar" src="${img}" />`);
mydialog.buttons(true, true, 'Cortar', "avatar.guardar()", true, false, true, 'Cancelar', 'close', true, true);
/*mydialog.buttons([
{mostrar: true, texto: 'Cortar', accion: `avatar.guardar()`, activo: true},
{mostrar: true, texto: 'Cancelar', accion: 'cerrar', activo: true}
]);*/
mydialog.center();
$("#avatar-img, #avatar-menu").attr("src", img).on('load', () => {
let sizes = [avatar.size, avatar.size, 'px'];
var croppr = new Croppr('.avatar-cortar', {
aspectRatio: 1, // Mantemos el tamanio cuadrado 1:1
startSize: sizes,
minSize: sizes,
// Enviamos las coordenadas para cortar la imagen
// Tiene la funcion onCropEnd ya que es como va a quedar
onCropEnd: data => avatar.informacion = data,
onCropMove: avatar.vistaPrevia
});
});
},
vistaPrevia: function (coords) {
let rx = avatar.size / coords.width;
let ry = avatar.size / coords.height;
$('#avatar-img').css({
width: Math.round(rx * coords.width) + 'px',
height: Math.round(ry * coords.height) + 'px',
marginLeft: '-' + Math.ceil(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
},
recargar: () => $("#avatar-img").attr("src", avatar.current + '?r' + new Date()),
guardar: () => {
if (empty(avatar.informacion))
cuenta.enviar_alerta('Debes seleccionar una parte de la foto', 0);
else {
const coordenadas = new FormData();
coordenadas.append('key', avatar.key)
coordenadas.append('ext', avatar.ext)
coordenadas.append('x', avatar.informacion.x)
coordenadas.append('y', avatar.informacion.y)
coordenadas.append('w', avatar.informacion.width)
coordenadas.append('h', avatar.informacion.height)
fetch(global_data.url + '/upload-crop.php', {
method: 'POST',
body: coordenadas
})
.then(response => response.json())
.then(blobData => {
if(blobData.error == "success") {
mydialog.body("Tu avatar se ha creado correctamente, ahora espera que recargue la página");
mydialog.buttons(true, true, 'Aceptar', 'close', true, true, false);
$("#input_add").hide();
$(`input[name="url"]`).attr({
value: ''
})
}
});
}
}
}3 - Luego en tema/js/cuenta.js buscar
Código: ( Seleccionar Todo )
var avatar = { .....y borran todo hasta el final del archivo
4 - Luego van a inc/php/ajax.upload.php y lo reemplazan por esto
Código PHP: ( Seleccionar Todo )
<?php if ( ! defined('TS_HEADER')) exit('No se permite el acceso directo al script');
/**
* Controlador AJAX
*
* @name ajax.upload.php
* @author PHPost Team
*/
/**********************************\
* (VARIABLES POR DEFAULT) *
\*********************************/
// NIVELES DE ACCESO Y PLANTILLAS DE CADA ACCIÓN
$files = array(
'upload-avatar' => array('n' => 2, 'p' => ''),
'upload-crop' => array('n' => 2, 'p' => ''),
'upload-images' => array('n' => 2, 'p' => ''),
);
/**********************************\
* (VARIABLES LOCALES ESTE ARCHIVO) *
\*********************************/
// REDEFINIR VARIABLES
$tsPage = 'php_files/p.upload.'.$files[$action]['p'];
$tsLevel = $files[$action]['n'];
$tsAjax = empty($files[$action]['p']) ? 1 : 0;
/**********************************\
* (INSTRUCCIONES DE CODIGO) *
\*********************************/
// DEPENDE EL NIVEL
$tsLevelMsg = $tsCore->setLevel($tsLevel, true);
if($tsLevelMsg != 1) { echo '0: '.$tsLevelMsg['mensaje']; die();}
// CLASE
require('../class/c.upload.php');
$tsUpload = new tsUpload();
// CODIGO
switch($action){
case 'upload-avatar':
// <--
$tsUpload->image_scale = true;
$tsUpload->image_size['w'] = 640;
$tsUpload->image_size['h'] = 480;
//
$tsUpload->file_url = $_POST['url'];
//
$result = $tsUpload->newUpload(3);
echo json_encode($result);
// -->
break;
case 'upload-crop':
// <--
echo json_encode($tsUpload->cropAvatar($tsUser->uid));
// PARA EL PERFIL
db_exec(array(__FILE__, __LINE__), 'query', 'UPDATE u_perfil SET p_avatar = 1 WHERE user_id = ' . $tsUser->uid);
// -->
break;
case 'upload-images':
echo json_encode($tsUpload->newUpload(1));
break;
}
Eso es todo...
Facebook
Twitter
Reddit
Digg
del.icio.us
Tumblr
Pinterest
Blogger
Fark
LinkedIn
Mix
Google