1
나는 croppie.js을 사용하여 페이스 북 SDK 또는 아약스 업로드 및 자르기에서 이미지를 가져 와서 내 서버 디렉토리에 업로드하는 앱을 개발하려고합니다. 저는 Ajax, jQuery 및 PHP를 처음 사용합니다. 나는 그것이 내가이 코드와 프론트 엔드를 만든크로 파이 결과를 추가하여 다른 PHP 페이지에 결과를 전달하는 방법
function dataURItoBlob(dataURI) {
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]);
else byteString = unescape(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
window.uploadPicture = function(callback) {
croppie.result({
size: "viewport"
}).then(function(dataURI) {
var formData = new FormData();
formData.append("design", $("#fg").data("design"));
formData.append("image", dataURItoBlob(dataURI));
$.ajax({
url: "upload.php",
data: formData,
type: "POST",
contentType: false,
processData: false,
success: callback,
error: function() {
document.getElementById("download").innerHTML = "Download Profile Picture";
},
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var max = e.total;
var current = e.loaded;
var percentage = Math.round((current * 100)/max);
document.getElementById("download").innerHTML = "Uploading... Please Wait... " + percentage + "%";
}
}, false);
}
return myXhr;
},
});
});
}
window.updatePreview = function(url) {
document.getElementById("crop-area").innerHTML = "";
window.croppie = new Croppie(document.getElementById("crop-area"), {
"url": url,
boundary: {
height: 400,
width: 400
},
viewport: {
width: 400,
height: 400
},
});
$("#fg").on('mouseover touchstart', function() {
document.getElementById("fg").style.zIndex = -1;
});
$(".cr-boundary").on('mouseleave touchend', function() {
document.getElementById("fg").style.zIndex = 10;
});
document.getElementById("download").onclick = function() {
this.innerHTML = "Uploading... Please wait...";
uploadPicture(function(r) {
document.getElementById("download").innerHTML = "Uploaded";
window.location = "download.php?i=" + r;
});
};
document.getElementById("download").removeAttribute("disabled");
};
window.onFileChange = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
image = new Image();
image.onload = function() {
var width = this.width;
var height = this.height;
if (width >= 400 && height >= 400) updatePreview(e.target.result);
else alert("Image should be atleast have 400px width and 400px height");
};
image.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function() {
$(".design").on("click", function() {
$("#fg").attr("src", $(this).attr("src")).data("design", $(this).data("design"));
$(".design.active").removeClass("active");
$(this).addClass("active");
});
});
을 app.js의 문서라도 코드입니다 생각 같은 기능을 수행합니다 인터넷에서 유사한 응용 프로그램을 발견했다. 하지만 난 더 이상 갈 수 없어. upload.php 코드는 내 서버에 업로드하고 출력을 download.php으로 전송합니다. 여기서 공유 버튼을 추가하여 잘린 iamge를 공유 할 수 있습니다. needfull을하고이 자바 스크립트로 작동하는 upload.php 코드와 download.php 코드를 공유하십시오. 고마워요! 당신이 그것을에
croppie.result({
size: 'viewport',
type: 'blob'
}).then(function(blob) {
...
formData.append('image', blob, 'screenshot.png')
...
})
과 자신을 구축 할 필요가 없습니다