function initStage(image) {
var stage = new Kinetic.Stage({
container: 'loginDiv',
width: 800,
height: 500,
});
var layer = new Kinetic.Layer();
var bg = new Kinetic.Rect({
width: stage.getWidth(),
height: stage.getHeight(),
x: 0,
y: 0
});
layer.add(bg);
layer.on('mousedown', function (e) {
var node = e.targetNode;
select(node);
});
var darthVaderGroup = new Kinetic.Group({
x: 5,
y: 5,
draggable: true,
fill: 'black'
});
layer.add(darthVaderGroup);
stage.add(layer);
$("#Check_Q").click( function(){
if( $(this).is(':checked') )
{
alert("on");
}
else {
alert("off");
}
});
function select(node) {
// alert("select");
deselect();
if (node.parent.nodeType = 'Kinetic.Group') {
var children = node.parent.children;
for (i = 1; i < children.length; i++) {
if (children[i].getName() == 'topLeft' ||
children[i].getName() == 'topRight' ||
children[i].getName() == 'bottomRight' ||
children[i].getName() == 'rotateAnchor' ||
children[i].getName() == 'bottomLeft') {
children[i].show();
}
}
}
}
function deselect() {
// alert("de-select");
var children = layer.children;
for (i = 1; i < children.length; i++) {
var grandChildren = children[i].children;
if (grandChildren) {
for (j = 1; j < grandChildren.length; j++) {
if (grandChildren[j].getName() == 'topLeft' ||
grandChildren[j].getName() == 'topRight' ||
grandChildren[j].getName() == 'bottomRight' ||
grandChildren[j].getName() == 'rotateAnchor' ||
grandChildren[j].getName() == 'bottomLeft') {
grandChildren[j].hide();
layer.draw();
}
}
}
}
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
// img.onload = start;
img.crossOrigin = "anonymous";
img.src = image;
// alert(img.src);
// draw the star image to the offscreen canvas
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
//image: document.getElementById("photoCanvas").getContext("2d").toImageURL(),
//image: image.darthVader,
image: canvas,
// draggable: true,
width: 780,
height: 480,
name: 'image',
stroke: '#F8F0F0',
strokeWidth: 7,
fill: '#F8F0F0'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// layer.add(darthVaderImg);
// layer.draw();
stage.draw();
// create an offscreen canvas
var filters_k = $('#filters_k li a, #filters1_k li a, #filters2_k li a, #filters3_k li a, #filters4_k li a');
filters_k.click(function (e) {
// alert("vaagi");
// $('.k_submenu').css({'display':'visible'});
e.preventDefault();
//layer.clear();
var f = $(this);
//if (f.is('.active')) {
// // Apply filters only once
// return false;
//}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
// layer.draw();
Caman(canvas, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
// layer.draw();
stage.draw();
}
});
});
document.getElementById('facebook_post').addEventListener('click', function() {
var FB_CMNT = prompt("Please Write Your Comment To Share On Facebook!");
stage.toDataURL({
callback: function(image) {
try{
fbkd(image,FB_CMNT);
function fbkd(image,FB_CMNT){
var authToken;
FB.login(function (response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
authToken = access_token;
alert("authtkn---"+authToken);
Login(image, authToken,FB_CMNT);
// k_loading();
} else {
}
}, {
scope: 'publish_actions,publish_stream'
});
}
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia]);
return blob;
} // Create Base64 to upload on facebook
function Login(image,authToken,FB_CMNT)
{
try {
blob = dataURItoBlob(image);
} catch (e) {
alert(e);
}
var fd = new FormData();
fd.append("access_token", authToken);
fd.append("source", blob);
fd.append("message", FB_CMNT+ " - https://play.google.com/store/apps/details?id=com.skyproductivity.android.cellphonetracker&hl=en");
try {
$.ajax({
url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false,
success: function (data) {
// alert("success " + data);
},
error: function (shr, status, data) {
alert("error " + data + " Status " + shr.status);
},
complete: function () {
k_loading_hide();
alert("Successfully Shared On Facebook");
}
});
} catch (e) {
console.log(e);
}
} // Login & Auth Check for facebook
}catch(e){alert(e)}
}
});
});
var filters = [];
$(".FilterSetting input").each(function () {
filters.push({
"name": $(this).data("filter"),
"value": $(this).val()
});
});
$("#Filters").on("mouseup", ".FilterSetting input", function () {
var filter = $(this).data("filter");
var value = $(this).val();
// $(this).parent().parent().find(".FilterValue").children("label").html(value);
for (var i = 0; i < filters.length; i++) {
//alert(filters.length);
if (filters[i].name == filter) {
filters[i].value = value;
}
}
changeImageFeatures();
});
function changeImageFeatures() {
var brightnessValue = filters[0].value;
var saturationValue = filters[1].value;
var exposureValue = filters[2].value;
var sepiaValue = filters[3].value;
var noiseValue = filters[4].value;
var sharpenValue = filters[5].value;
// var contrastValue = filters[6].value;
var vibranceValue = filters[7].value;
var hueValue = filters[8].value;
// var gammaValue = filters[9].value;
var clipValue = filters[10].value;
Caman(canvas, function () {
this.revert(false);
this.brightness(brightnessValue);
this.saturation(saturationValue);
this.exposure(exposureValue);
this.sepia(sepiaValue);
this.noise(noiseValue);
this.sharpen(sharpenValue);
// this.contrast(contrastValue);
this.vibrance(vibranceValue);
this.hue(hueValue);
// this.gamma(gammaValue);
this.clip(clipValue);
this.render();
});
}
}
[我正在尝试在选定的复选框上使用该 select(node) 功能]
$("#Check_Q").click( function(){
if( $(this).is(':checked') )
{
alert("on");
}
else {
alert("off");
}
});
[我正在创建网站以更新照片并在 facebook 上分享，但由于我从 stackoverflow 获得了帮助并且确实喜欢这样做，但无法通过复选框选择删除所有锚点]
[请帮忙]
[提前非常感谢]