Pessoal,
Tem um código bacana que foi postado numa vídeo por Eliel Ramos, do @scriptcaser, que pode ser encontrado neste link https://www.youtube.com/watch?v=sfjQ4I-rcVk
Segui todos os passos e funcionou direitinho quando executado no desktop, a imagem é salva no banco de dados e absurdamente redimensionada, porém quando executado em mobile, ao selecionar a imagem, ela não é exibida no preview do campo, e o usuário fica sem saber se ela foi carregada ou não, nem exibe a barra de progresso do carregamento.
Fiz vários testes com o suporte do SC, e constatamos que o problema está no JS.
Não entendo nada de JS e gostaria de uma ajuda desse fórum pra resolver meu problema, pois preciso da imagem sendo carregada e exibida no preview do mobile phone. Minha versão do SC é a 9.7.
Preciso que a imagem, ao ser carregada no mobile (celular ou tablet), seja exibido o preview da foto antes de salvar pra o usuário ter certeza de que carregou a imagem correta.
Esse é o código da biblioteca imageResize.js
function interceptField(fieldName, sizeLimit) {
// id_sc_dragdrop_binaryvalue
var inputEl = $('#id_sc_field_' + fieldName);
var dropEl = $('#hidden_field_data_' + fieldName);
var handleChange = function(ev) {
var file = ev.target.files[0];
if(file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
var canvas = document.createElement('canvas'),
max_size = sizeLimit,
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var resizedImage = dataURLToBlob(dataUrl);
$.event.trigger({
type: "imageResized",
blob: resizedImage,
filename: file.name,
filetype: file.type,
fieldName: fieldName,
url: dataUrl
});
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
}
inputEl.off('change');
inputEl.on('change', handleChange);
dropEl.off('drop');
dropEl.on('drop', function(ev) {
ev.preventDefault();
if (ev.originalEvent.dataTransfer.items) {
if (ev.originalEvent.dataTransfer.items[0].kind === "file") {
var file = ev.originalEvent.dataTransfer.items[0].getAsFile();
console.log(file);
}
} else {
var file = ev.originalEvent.dataTransfer.files[0];
}
var container = new DataTransfer();
container.items.add(file);
$('#id_sc_field_' + fieldName)[0].files = container.files;
$('#id_sc_field_' + fieldName).change();
});
}
function dataURLToBlob(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = parts[1];
return new Blob([raw], {type: contentType});
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
function handleResize(event, tmpPath, scPage, uploadFile) {
if (event.blob && event.url) {
var data = new FormData();
var fieldName = event.fieldName;
data.append(fieldName + '[]', event.blob, event.filename);
data.append('param_field', fieldName);
data.append('upload_file_row', '');
data.append('param_seq', scPage);
$.ajax({
url: './' + uploadFile + '.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data) {
var filePath = tmpPath + '/' + JSON.parse(data)[0].sc_image_source;
var file = new File([event.blob], event.filename, {type:event.filetype, lastModified: new Date().getTime()});
var container = new DataTransfer();
container.items.add(file);
$('#id_ajax_img_' + fieldName).show()[0].src = event.url;
$('#id_sc_field_' + fieldName)[0].files = container.files;
$('#id_sc_field_' + fieldName + '_ul_type').val(event.filetype);
$('[name="temp_out_'+ fieldName +'"]').val(filePath);
var_ajax_img_binaryvalue = event.url;
}
});
return true;
} else {
return false;
}
}
Esse é o código inserido no onScriptInt:
$no_params_exist =
!array_key_exists('nmgp_opcao', $_REQUEST) &&
!array_key_exists('rs', $_REQUEST) &&
!array_key_exists('campos_sel', $_REQUEST);
$nmgp_is_not_ajax =
array_key_exists('nmgp_opcao', $_REQUEST) &&
strpos($_REQUEST['nmgp_opcao'] , 'ajax') === false &&
strpos($_REQUEST['nmgp_opcao'] , 'refreshWidget') === false;
$rs_is_not_ajax =
array_key_exists('rs', $_REQUEST) &&
strpos($_REQUEST['rs'] , 'ajax') === false;
if (($no_params_exist) || ($nmgp_is_not_ajax) || ($rs_is_not_ajax)) {
?>
<script src='<?php echo sc_url_library("prj", "imageResize", "imageResize.js"); ?>'></script>
<script>
$(document).ready(function() { // Aqui você vai informar os campos de imagem do formulário
var fieldName = 'img_antes';
interceptField(fieldName, 300); // Você define o tamanho em pixels
var fieldName = 'img_depois';
interceptField(fieldName, 300);
});
$(document).on("imageResized", function (ev) {
handleResize(ev,
'<?php echo $this->Ini->path_imag_temp; ?>',
'<?php echo $this->Ini->sc_page; ?>',
'<?php echo $this->Ini->nm_cod_apl; ?>_ul_save');
});
</script>
<?php
}
#Método responsável por retirar letras acentuadas
function mg_utils_retiraAcento($str)
{
$str = str_replace("á","a",$str);
$str = str_replace("Á","a",$str);
$str = str_replace("é","e",$str);
$str = str_replace("É","e",$str);
$str = str_replace("ç","c",$str);
$str = str_replace("Ç","c",$str);
$str = str_replace("ã","a",$str);
$str = str_replace("Ã","a",$str);
$str = str_replace("õ","o",$str);
$str = str_replace("Õ","o",$str);
$str = str_replace("ê","e",$str);
$str = str_replace("Ê","e",$str);
$str = str_replace("ú","u",$str);
$str = str_replace("Ú","u",$str);
$str = str_replace("ó","o",$str);
$str = str_replace("Ó","o",$str);
$str = str_replace("í","i",$str);
$str = str_replace("â","a",$str);
$str = str_replace("Â","a",$str);
return $str;
}