Develop Reference

Getting cropperjs to post cropped image to server

I'm trying to integrate Chen Fengyuan's 'cropperjs' into a website I'm designing and I have the interface working fine with the crop box doing as it should. However, my limited knowledge of Javascript and jQuery has brought me to a standstill.
What I would like to do is click on a button under the canvas (similar to the Get Cropped Canvas button) and have the cropped image posted to the server using a simple jQuery AJAX call.
I don’t need a preview of the cropped image as the image is already previewed on the interface. However, I can't seem to do this successfully because every time I try and use the methods provided in the 'cropperjs' documentation, I get a browser errors like:
ReferenceError: cropper is not defined
I've tried various methods and have seen a lot of solutions online but I just can't seem to get it right. I know I'm doing something very wrong but because I don't understand Javascript and jQuery well enough. I'm really struggling. The documentation mentions initialising with the Cropper constructor but I don't know how to do this and I'm guessing this is where my problem is? Can anyone help?

I've manage to painfully solve this myself so for anyone who's interested, here's the code I used:-
var $image = $("#image");
var cropper = $image.cropper();
var baseURL = window.location.protocol+'//'+window.location.host;
var pho_id = $("input[name=pho_id]").val();
var mem_id = $("input[name=mem_id]").val();
var photopath = $("input[name=photopath]").val();
$image.cropper('getCroppedCanvas').toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
formData.append('pho_id', pho_id);
formData.append('mem_id', mem_id);
formData.append('photopath', photopath);
$.ajax(baseURL+'/path/', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
}, 'image/jpeg', 0.8);

File format of the VTK file to be used as input for XTK

I have a .vtk file at remote server. I am accessing it via http (I verified that the url of the file is correct, in fact I can download it from the browser). I've also tried to remove the blank spaces from the file as suggested in xtk volume rendering with .vtk file created from matlab.
But i get an exception
Unable to get property 'length' of undefined or null reference.
Can you please guide me the .vtk file format that should be used in order to make it work smoothly ?
I am following the xtk tutorial http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/05/#run, below is my code
window.onload = function () {
// create and initialize a 3D renderer
var r = new X.renderer3D();
r.init();
// create a new X.mesh
var skull = new X.mesh();
// .. and associate the .vtk file to it
skull.file = 'http://localhost/startup/bunnycheck.vtk'; //using other .vtk file
//skull.file = 'http://x.babymri.org/?skull.vtk';
// .. make it transparent
skull.opacity = 0.5;
// .. add the mesh
r.add(skull);
// re-position the camera to face the skull
r.camera.position = [0, 400, 0];
// animate..
r.onRender = function () {
r.camera.rotate([1,0]);
};
r.render();
};

I just got a similar exception, the problem was that the file was a binary vtk file, and it should have been ASCII .

You should notice the version of vtk.
As far as I know, xtk cannot support vtk9.0.1, because
the vtk format changed a lot in vtk9.0.1.
You can revert to vtk version 8.1.2 or older.

Using Phonegap download image and want to convert it into base64 in iOS

I am stuck in problem regarding base64.
The situation is - I download image in iPad and getting path of that download image like this :-
{"isFile":true,"isDirectory":false,"name":"testImage.png","fullPath":"/testImage.png","filesystem":"","nativeURL":"file:///var/mobile/Containers/Data/Application/4048F634-D44A-40F8-ACA0-32BC9F401F56/Documents/testImage.png"}
In the above object ,nativeURl from which I am getting image and I am able to append on HTML page, but I want convert it into base64 ,& I am not been able to get till now.
I know somewhere it is possible. I am just making a mistake.
So anybody,expert please help me sort out that issue, if provide example that will be help full in any online editor.
Thanks
Shivam

<div id='mainPostDiv'></div>
//hello, you need to convert into base64
// set your data first in localStorage
var imageData = localStorage.getItem("ImageData");
var imgPost = document.createElement('img');
imgPost.setAttribute('id', "imgPost");
imgPost.src = "data:image/jpeg;base64," + imageData;
$('#mainPostDiv').append(imgPost);

How to do image overlay and watermark using node.js in amazon lambda function

I have images hosted on amazons3 server.my client wants to process the images using amazon lambda function. I have followed the example: http://docs.aws.amazon.com/lambda/latest/dg/walkthrough-s3-events-adminuser-create-test-function-create-function.html
It is fine for resizing. But I want overlay and watermarking for the images also.But not getting a way.I have tried with imagemagick[https://www.npmjs.com/package/gm] for it seems to take path as parameter and the s3 image path is not helping me. the obvious reason I think is that they can't be directly accessed as the images paths in the directory.
Any suggestion on how to achieve this. I stuck for last 3 days but not able move forward.Thanks in advance for help!!!!

It looks like your are trying to do the overlaying in the size action. A quick check over at the gm repository on GitHub showed an issue with a possible solution. It seems as thought the composite action accepts a stream to read from. In regards to your code I would suggest a refactor to chain the actions together. I'm not sure I understand where the write stream is going in your original function though. Let me know if this helps!
var scalingFactor = Math.min(
newSize / size.width,
newSize / size.height
);
var width = scalingFactor * size.width;
var height = scalingFactor * size.height;
gm(response.Body)
.autoOrient()
.resize(width, height)
.gravity('SouthEast')
.draw('image Over 0,0 0,0 ' + getAppPath() + '/path/to/wm-bas.png')
.stream('PNG') // This converts the whole thing to a png, not sure if you want this
.pipe(writeStream) // Change this

Take screenshot of <body> with html2canvas and store img as JS var

I am attempting to let users on my site push a button to take a screenshot of the current screen ( everything in body).
From my research, html2canvas seems to be a resource that makes this possible.
My issue is the documentation does not provide example code and I am struggling to get a grip on the steps involved.
http://html2canvas.hertzen.com/documentation.html
The following SO question ( How to upload a screenshot using html2canvas? ) leaves me a bit confused. I just want to know how to get an image at this point.
From his code.
$(window).ready(function(){
('body').html2canvas();
var canvasRecord = new html2canvas(document.body).canvas;
//At this point does the .toDataURL method return a png?
});
At this point I am lost where the image is, or even how/when to create it. Ill worry sending it to the server later.
Any information appreciated. Thanks! (html2canvas even needed?)

As you are using the html2canvas jQuery plugin, here is a sample snippet
var screenshot;
$('body').html2canvas({
onrendered: function(canvas) {
screenshot = canvas.toDataURL();
//code to process/send the image to server
}
});
In the above code snippet the html2canvas creates the screenshot of the page.
You can also use PhantomJS to create screenshots of webpages - provided that they are public pages, because you may not be able to access login protected pages on the server-side; in such situations only a client-side solution like html2canvas will work.

$("#screenshot").click(function() {
$("body").html2canvas({
onrendered: function( canvas ) {
$(".filt_opt_n").html(canvas);
//window.open(img);
}
});
});
<div id="screenshot"></div>
.filt_opt_n this is a div which u want to show the output this is working for me

May be an old question. You could try this!
var htmlCanvas = new html2canvas(document.body);
var queue = htmlCanvas.parse();
var canvas = htmlCanvas.render(queue, { elements: { length: 1} });
var img = canvas.toDataURL();