有人知道如何使用 darkroomjs 将裁剪后的图像发布到 PHP 中吗？
链接：https://github.com/MattKetmo/darkroomjs
我想将裁剪后的图像上传到服务器。另外，如何设置裁剪图像的位置以显示在不同的 HTML 元素中。
例如，如果我在 darkroomjs 中点击裁剪按钮，它会使用新图像更新裁剪器画布。如何使它也将裁剪的图像移动到页面上的另一个 HTML 元素？
提前致谢。
【问题讨论】：
标签： javascript php jquery html
我有一个工作版本 - 我花了大约一个小时来弄清楚并窃取其他人的建议，将它们混合在一起，并在这里和那里改变了一些位，就在这里......
我从 php ($('#profile_pic_filename').val();) 填充的隐藏输入类型将我的 html 中的文件名解析为 JavaScript
if($('.image-container.target').length){
$('#member_portrait').change(function(){
$('#member_photo_hidden_file').val("");
});
var pic_name = $('#profile_pic_filename').val();
var dkrm = new Darkroom('#target', {
// Size options
minWidth: 100,
minHeight: 100,
maxWidth: 600,
maxHeight: 500,
ratio: 4/3,
backgroundColor: '#000',
// Plugins options
plugins: {
//save: false,
crop: {
quickCropKey: 67, //key "c"
//minHeight: 50,
//minWidth: 50,
//ratio: 4/3
},
save: {
callback: function() {
this.darkroom.selfDestroy(); // Cleanup
var newImage = dkrm.canvas.toDataURL();
$.ajax({
type : "POST",
dataType : "html",
url : base_url+'ajax/updateProfilePic',
data : {
'newImage' : newImage,
'imageName' : pic_name
}
})
.done(function(response){
response = $.parseJSON(response);
var status = response.status;
var data = response.data;
if(status === "success"){
location.reload();
}else{
alert(data);
}
});
}
}
},
// Post initialize script
initialize: function() {
var cropPlugin = this.plugins['crop'];
// cropPlugin.selectZone(170, 25, 300, 300);
cropPlugin.requireFocus();
}
});
}
在我的 ajax 文件中，我获取图像并解码图像的 base 64 版本，然后将其解析为具有 filname 的函数，然后覆盖原始文件，嘿，图像已在服务器上被替换。
$newImage = '';
$imageName = '';
if(isset($_POST['newImage'])){
$newImage = $_POST['newImage'];
}
if(isset($_POST['imageName'])){
$imageName = $_POST['imageName'];
}
function saveProfilePic($filename,$filecontent){
if (strlen($filename)>0){
$folderPath = '/home/xxxxxxxxxxxxx/public_html/images/uploads/_mem_photo/';
if (!file_exists($folderPath)) {
mkdir($folderPath);
}
$file = @fopen($folderPath.$filename,"w");
if($file != false){
fwrite($file,$filecontent);
fclose($file);
return 1;
}
return -2;
}
return -1;
}
$data = explode(',',$newImage);
$final = base64_decode($data[1]);
$fileSavingResult = saveProfilePic($imageName, $final);
if($fileSavingResult == 1){
$return = array("status"=>"success", "data"=>"File was saved!");
}
else if($fileSavingResult == -2){
$return = array("status"=>"fail", "data"=>"An error occured during saving file!");
}
else if($fileSavingResult == -1){
$return = array("status"=>"fail", "data"=>"Wrong file name!");
}
echo json_encode($return);
我刚刚将 xxxxx 放入文件路径，因为我不想放弃任何服务器信息。
如果一切成功，您将重新加载页面，并将新转换的图像加载到页面上，但如果出现错误，它会提醒您。
【讨论】：
理论上，为了将图像发布到 PHP，您需要获取 <img> 元素的 src 内容，在此插件的情况下，该元素存储在 Base64 中。
使用 JQuery 获取该值后，您可以使用 AJAX 将其异步发送到服务器，或者通过将src 内容放入某个隐藏字段中以常规方式发布您的表单。从那时起，您可以使用PHP's GD and Image functions 或Intervention / Image 等工具在服务器上根据该Base64 数据创建图像文件。
在您的情况下，仅通过抓取 <img src="base64img"> 来异步发送它可能是最简单的。
$('#theForm').submit(function(event){
// preventDefault stops the regular synchronous submit from happening -- we don't want that. we want an async AJAX request
event.preventDefault();
var formData = $('#yourImgElement').attr('src');
var returnMessage = '';
$.post(site+'post/to/location', formData, function(response){
if(response.status){
returnMessage = 'Save Successful.';
} else {
returnMessage = 'Save Failed:\n\n';
for (i = 0; i < response.errors.length; i++) {
returnMessage += '- ' + response.errors[i] + '\n';
}
}
alert(returnMessage);
},'json');
return false; // return false to cancel form action
});
我的理解是裁剪图像并保存它应该反映Base64内部的变化，但我个人和其他人实际上是having problems with that。
为了做你想做的其他事情，你应该能够用 JQuery 相当容易地做到这一点（查看重组 DOM）。只需挂钩事件：
// Post initialization method
initialize: function() {
// Active crop selection
this.plugins['crop'].requireFocus();
// Add custom listener
this.addEventListener('core:transformation', function() {
// THIS IS WHERE YOU WOULD THEN PERFORM DOM MANIPULATIONS USING JQUERY
});
}
但是，在图像被编辑后移动图像时应该小心。如果插件期望某些元素位于某些位置，它可能会引发 JavaScript 错误。
已更新解决方案：
=======================
图片的src 永远不会改变。为了得到编辑后图像的 Base64 代码，你实际上需要向画布索取它。以下是你可以做到的：
// Plugins options
plugins: {
crop: {
//minHeight: 300,
//minWidth: 400,
//ratio: 4/3
},
save: {
callback: function() {
this.darkroom.selfDestroy(); // Turn off the bar and cleanup
var newImage = dkrm.canvas.toDataURL();
varThatStoresYourImageData = newImage;
}
}
}
【讨论】：