0
回転イメージとテキスト座標をデータベースに保存し、同じ角度でイメージを印刷するにはどうすればいいですか？私はイメージをテキストに保存し、結果イメージに表示しようとしています。回転した画像やテキストを保存する方法fabric.jsの回転座標をデータベースに保存し、同じ角度で結果を表示するにはどうすればいいですか？
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="plugins/fabricjs/fabric.min.js"></script>
<!-- Fabric Script new -->
<script>
var canvas = new fabric.Canvas('can');
canvas.on({
'object:scaling': function(p){
if (p.target.scaleX < 1)
p.target._objects[1].scaleX = 1 + (1 -p.target.scaleX)
else
p.target._objects[1].scaleX = 1/(p.target.scaleX)
if (p.target.scaleY < 1)
p.target._objects[1].scaleY = 1 + (1 -p.target.scaleY)
else
p.target._objects[1].scaleY = 1/(p.target.scaleY)
canvas.renderAll()
},
});
//canvas.add(profilepic);
var photoCan = new Array(12);
for(var j=0 ; j<12 ; j++) {
photoCan[j] = photoGroup("User "+ (j+1));
}
var textCan = new Array(12);
for(var j=0 ; j<12 ; j++) {
textCan[j] = textGroup("Textbox "+ (j+1));
}
function photoGroup (text,x,y,w,h) {
w = w || 200; //defaults
h = h || 200;
x = x || 150;
y = y || 100;
var profilepic = new fabric.Rect({
originX: 'center',
originY: 'center',
fill: "#000",
strokeDashArray: [5, 5],
stroke: '#fff',
width: w,
height: h
});
var text = new fabric.Text(text, {
fontSize: 30,
fill: "#fff",
originX: 'center',
originY: 'center',
});
var group = new fabric.Group([ profilepic, text ], {
left: x,
top: y,
angle: 0
});
group.lockRotation = false;
group.lockUniScaling = false;
return group;
}
function textGroup (text,x,y,w,h) {
w = w || 300; //defaults
h = h || 200;
x = x || 150;
y = y || 100;
var profilepic = new fabric.Rect({
originX: 'center',
originY: 'center',
fill: "#2e2e2e",
strokeDashArray: [5, 5],
stroke: '#fff',
width: w,
height: h,
});
var text = new fabric.Text(text, {
fontSize: 30,
fill: "#fff",
originX: 'center',
originY: 'center',
});
var group1 = new fabric.Group([ profilepic, text ], {
left: x,
top: y,
angle: 0,
lockUniScaling: false,
});
group1.lockRotation = false;
group1.lockUniScaling= false;
return group1;
}
</script>
<!-- new script -->
<script>
$('document').ready(function() {
//hide add more buttons
$(".addButtons").hide();
$(".removeButtons").hide();
$("#myDropzonef").hide();
//**********************************Important: Show addButtons if already number is specified***********
//vars to get num of elements
var photonum = 0;
var textnum = 0;
//vars to get MAX
var phototot = 12;
var texttot = 12;
// Add more photos
$('#addmorephotos').click(function() {
addPhotoField();
});
// Add more Text
$('#addmoretext').click(function() {
addTextField();
});
// REMOVE BUTTONS
// Remove last photo
$("#removelastphoto").click(function() {
canvas.remove(photoCan[photonum-1]);//remove from canvas
$('#userphotogrp'+(photonum-1)).remove(); //remove from options
photonum--; //subtract the number
if(photonum<=1) $("#removelastphoto").hide(); //remove the button if less than num
});
// Remove last Text
$("#removelasttext").click(function() {
canvas.remove(textCan[textnum-1]);//remove textarea from canvas
$('#textgrp'+(textnum-1)).remove(); //remove from options
textnum--; //subtract the number
if(textnum<=1) $("#removelasttext").hide(); //remove the button if less than num
});
//checked or unchecked photos checkbox
$('#addPhotosCheck').change(function() {
if(this.checked) {
//checked
addPhotoField();
$("#addmorephotos").show();
} else {
//unchecked
var returnVal = confirm("This will remove the entered data?");
$(this).prop("checked", !returnVal);
if(returnVal) {
$('#photoslist').html(''); //remove all divs inside list
$("#addmorephotos").hide();
$("#removelastphoto").hide(); //remove remove button
for(var k=0; k<phototot ; k++) {
canvas.remove(photoCan[k]); //Remove all photos from canvas
}
photonum = 0; //reset value of photo number
}
}
});
//checked or unchecked BG checkbox
$('#addBgCheck').change(function() {
if(this.checked) {
$("#myDropzonef").show();
$(".morfchoice").show();
} else {
$("#myDropzonef").hide(); //*********************************also delete the female files
$(".morfchoice").hide();
}
});
//checked or unchecked Text checkbox
$('#addTextCheck').change(function() {
if(this.checked) {
//checked
addTextField();
$("#addmoretext").show();
} else {
//unchecked
var returnVal = confirm("This will remove the entered data?");
$(this).prop("checked", !returnVal);
if(returnVal) {
$('#textlist').html(''); //remove all divs inside list
$("#addmoretext").hide();
$("#removelasttext").hide(); //remove remove button
for(var k=0; k<texttot ; k++) {
canvas.remove(textCan[k]); //Remove all photos from canvas
}
textnum = 0; //reset value of photo number
}
}
});
function addPhotoField(){
if(photonum<phototot) {
$('#photoslist').append(`<div class="well"><div class="form-group" id="userphotogrp`+photonum+`" ><hr><h2>`+(photonum+1)+`</h2>
<label for="userphoto`+photonum+`">Photo type</label>
<select class="form-control userphotos" id="userphoto`+photonum+`">
<option>User Photo</option>
<option>Friend Photo</option>
<option>Friend Photo (Opposite gender)</option>
</select>
</div></div>`);
canvas.add(photoCan[photonum]); // add photo to canvas
if(photonum>0) {$("#removelastphoto").show(); }//show the "remove last" button
photonum++;
} else {
alert("You can only add upto "+phototot+ " Photos");
}
}
function addBgField(){
if(bgnum<bgtot) {
$('#backgroundlist').append(`<div class="well">
<div class="form-group" id="bggrp`+bgnum+`" ><hr><h2>`+(bgnum+1)+`</h2>
<label for="bg`+bgnum+`">Upload an image</label>
<input type="file" class="form-control-file" id="bg`+bgnum+`" aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">Prefered resolution is 800x420px</small>
</div>
<div class="form-group">
<label for="userphotos">Show to:</label>
<select class="form-control userphotos" id="userphotos">
<option>Common</option>
<option>Male</option>
<option>Female</option>
</select>
</div></div>`);
if(bgnum>0) $("#removelastbg").show();
bgnum++;
} else {
alert("You can only add upto "+bgtot+ " Backgrounds");
}
}
function addTextField(){
if(textnum<texttot) {
$('#textlist').append(`<div class="well">
<div class="form-group" id="textgrp`+textnum+`" ><hr><h2>`+(textnum+1)+`</h2>
<label for="text`+textnum+`">Add text line by line</label>
<textarea class="form-control" id="text`+textnum+`" rows="3"></textarea>
</div>
<div class="form-group">
<label for="showto`+textnum+`">Show to:</label>
<select class="form-control userphotos" id="showto`+textnum+`">
<option>Common</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="form-group">
<label for="style`+textnum+`">Text Style:</label>
<select class="form-control chosen-select" id="style`+textnum+`">
<?php foreach($styles as $style) {
echo "<option>$style[0]</option>\n";
} ?>
</select>
</div></div>`);
$(".chosen-select").chosen(); //change select fields to chosen
$('.chosen-container').css('width', '100%'); //some bug fix for chosenjs
canvas.add(textCan[textnum]); // add photo to canvas
if(textnum>0) $("#removelasttext").show();
textnum++;
} else {
alert("You can only add upto "+texttot+ " TextFields");
}
}
//SUBMIT CODE AJAX
$("#finalSubmit").click(function() {
$(".overlay").show(); //show loading
var formData = new Object();
formData.slug = slug; //set slug to post variable
formData.photos = {};
formData.text = {};
formData.token = "<?php echo $token; ?>";
var numofphotos = photonum;
var numoftext = textnum;
var phototype = 0; // type of photo -> [user,friend,opp gender friend] => [0,1,2]
var textshowto = 0; // whom to show the text -> [common, male, female] => [0,1,2]
var textval = ""; //value of text field
var textstyle = ""; //value of text style
var x,y,h,w,str = "";
//photos
for(var i =0 ; i < numofphotos ; i++) {
phototype = document.getElementById("userphoto"+i).selectedIndex;
x = Math.floor(photoCan[i].left);
y = Math.floor(photoCan[i].top);
w = Math.floor(photoCan[i].getWidth());
h = Math.floor(photoCan[i].getHeight());
str = phototype + "," + x + "," + y + "," + w + "," + h;
formData.photos[i] = str;
}
//text
for(var i =0 ; i < numoftext ; i++) {
textshowto = document.getElementById("showto"+i).selectedIndex;
textval = document.getElementById("text"+i).value;
textval = textval.trim(); //remove leading or trailing whitespaces
textstyle = $("#style"+i+" option:selected").val();
x = Math.floor(textCan[i].left);
y = Math.floor(textCan[i].top);
w = Math.floor(textCan[i].getWidth());
h = Math.floor(textCan[i].getHeight());
str = textstyle + "," + textshowto + "," + x + "," + y + "," + w + "," + h;
formData.text[i] = {"value" : textval, "prop" : str};
}
var dataToSend = JSON.stringify(formData);
console.log(dataToSend);
$.ajax({
url: 'edit-ajax.php',
type: 'POST',
data: {"data" : dataToSend},
success: function(data, textStatus, jQxhr){
$(".overlay").hide();
},
error: function(jqXhr, textStatus, errorThrown){
console.log(errorThrown);
}
});
});
//Load from previous
$(".overlay").show();
<?php
//load pre photos
$i = 0;
$prop = Array();
foreach ($photos as $photo) {
$prop = str_getcsv($photo["prop"]);
echo "$('#addPhotosCheck').prop('checked', true);";
echo '$("#addmorephotos").show();';
echo 'photoCan['.$i.'].top = '.$prop[2].';';
echo 'photoCan['.$i.'].left = '.$prop[1].';';
echo 'photoCan['.$i.'].scaleToHeight('.$prop[4].');';
echo 'photoCan['.$i.'].scaleToWidth('.$prop[3].');';
echo 'addPhotoField();';
echo 'document.getElementById("userphoto'.$i.'").selectedIndex = '.$prop[0].";";
$i++;
}
?>
<?php
$i = 0;
$prop = Array();
foreach ($text as $txt) {
$prop = str_getcsv($txt["prop"]);
echo "$('#addTextCheck').prop('checked', true);";
echo '$("#addmoretext").show();';
echo 'textCan['.$i.'].top = '.$prop[3].';';
echo 'textCan['.$i.'].left = '.$prop[2].';';
echo "textCan[{$i}].setScaleX({$prop[4]}/textCan[{$i}].getWidth());";
echo "textCan[{$i}].setScaleY({$prop[5]}/textCan[{$i}].getHeight());";
echo 'addTextField();';
echo 'document.getElementById("showto'.$i.'").selectedIndex = '.$prop[1].";";
echo '$("#style'.$i.'").val("'.$prop[0].'");';
echo '$(".chosen-select option:contains(Base)").prop("selected","selected");';
echo '$(".chosen-select").trigger("chosen:updated");';
echo '$("#text'.$i.'").text(`'.$txt['data'].'`);';
$i++;
}
?>
canvas.renderAll();
$(".overlay").hide();//stop loading
}); //document.ready end
</script>
同じ角度でデータベースと印刷 画像に座標？私は画像をテキストに保存して、 結果画像に表示しようとしています。
'toJSON（）'についてはどうですか？ – Durga
私はfabric.jsを使用して任意のサイズと角度で画像とテキストを回転させました.db – balayya
にすべて保存するには、画像とテキストの角度をデータベースに保存するために値を割り当ててください。 – balayya