Możesz przesuwać i przybliżać grafikę by uzyskać odpowiedni kadr.'; if (i.width < minSize || i.height < minSize) { document.getElementById('pbci-confirm-button-'+result.optId).disabled = true; document.getElementById('pbci-confirm-button-'+result.optId).innerHTML = 'Za małe wymiary zdjęcia'; document.getElementById('pbci-confirm-button-'+result.optId).style.color = 'red'; } else { document.getElementById('pbci-confirm-button-'+result.optId).disabled = false; document.getElementById('pbci-confirm-button-'+result.optId).innerHTML = 'Zatwierdź zdjęcie'; document.getElementById('pbci-confirm-button-'+result.optId).style.color = ''; } }; i.src = result.src; } } function cImageUpload() { var $uploadCrop = {}; function readFile(input) { var rOptId = input.id.replace('option_',''); if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $uploadCrop[rOptId].croppie('bind', { url: e.target.result }).then(function(){ document.getElementById('upload-div-prev-'+rOptId).style.display = 'none'; document.getElementById('upload-div-conf-'+rOptId).style.display = 'block'; document.getElementById('upload-div-conf-'+rOptId).style.height = (dSize + 125) + 'px'; setBorderSize(); }); etr[rOptId] = e.target.result; }; var ipath = document.getElementById('option_'+rOptId).value.split('\\'); fName[rOptId] = ipath[(ipath.length-1)]; aFN = fName[rOptId].split('.'); fName[rOptId] = aFN[0] + '.png'; reader.readAsDataURL(input.files[0]); document.getElementById('option_'+rOptId).value = ''; } else { swal("Sorry - you're browser doesn't support the FileReader API"); } } optIdList.forEach(function(optId) { if (document.getElementById('pbci-'+optId)) { $uploadCrop[optId] = $('#pbci-'+optId).croppie({ viewport: { width: dSize, height: dSize, type: 'circle' }, enableExif: true, enableOrientation: true }); $('#option_'+optId).on('change', function () { readFile(this); }); /* Zatwierdzanie zdjęcia */ $('#pbci-confirm-button-'+optId).on('click', function (ev) { $uploadCrop[optId].croppie('result', { type: 'canvas', size: 'original' }).then(function (resp) { confirmImage({ src: resp, optId: optId }); }); }); $('#pbci-'+optId).on('update.croppie', function(ev) { $uploadCrop[optId].croppie('result', { type: 'canvas', size: 'original' }).then(function (resp) { printInfo({ src: resp, optId: optId }); }); }); var pnf = document.getElementById('pbci-'+optId).getElementsByClassName('cr-boundary'); pnf[0].id = 'pbci-pnf-'+optId; $('#pbci-pnf-'+optId).append(''); } }); } function init() { cImageUpload(); } return { init: init }; })(); /* Treść dla każdego wariantu */ var imgInp = {}; if (document.getElementById('option_'+changeSizeId)) { $('#option_'+changeSizeId).on('change', function () { changeMinSize(this); }); } optIdList.forEach(function(optId) { if (document.getElementById('option_'+optId)) { imgInp[optId] = document.getElementById('option_'+optId); if (!document.getElementById('pbci-main-'+optId)) { const div = document.createElement('div'); div.id = 'pbci-main-'+optId; div.style = 'max-width: 385px;'; imgInp[optId].parentElement.appendChild(div); document.getElementById('pbci-main-'+optId).innerHTML = ''; dSize = document.getElementById('upload-div-conf-'+optId).clientWidth > 0 ? Math.round(document.getElementById('upload-div-conf-'+optId).clientWidth) : 200; document.getElementById('upload-div-conf-'+optId).innerHTML = '
'; document.getElementById('pbci-wrap-div-'+optId).style.width = dSize + 'px'; document.getElementById('pbci-wrap-div-'+optId).style.height = dSize + 'px'; setBorderSize(); } imgInp[optId].onchange = evt => { const [file] = imgInp[optId].files; if (file) { if (['image/jpeg', 'image/png'].indexOf(file.type) == -1) { alert('Plik graficzny ma niepoprawny typ! \\n\\nObsługiwane typy plików to: jpeg i png.'); imgInp[optId].value = ''; } } } } }); pbCrop.init(); function flipH(optId) { switch (etro[optId]) { default: case 1: etro[optId] = 2; break; case 2: etro[optId] = 1; break; case 3: etro[optId] = 4; break; case 4: etro[optId] = 3; break; case 5: etro[optId] = 6; break; case 6: etro[optId] = 5; break; case 7: etro[optId] = 8; break; case 8: etro[optId] = 7; break; } $('#pbci-'+optId).croppie('bind', { url: etr[optId], orientation: etro[optId] }).then(function(){ }); } function flipImage() { flipH(); } function dataURLtoFile(dataurl,optId) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], fName[optId], {type:mime}); }