How to reload/resubscribe to show updated photo crop in Meteor - javascript

I have a photo page with a jquery cropper loaded on an image. When satisfied with the crop dimensions, the user clicks a button and a method is called to crop the image.
'update_crop': function(
fileObj_id, photoSpec
)
{
PhotoCollection.find({"_id" : fileObj_id}).forEach(function (fileObj) {
console.log("Photo Spec in server: " + photoSpec.x);
var readStream = fileObj.createReadStream('ImageStore');
var writeStream = fileObj.createWriteStream('ImageStore');
gm(readStream, fileObj.name()).crop(photoSpec.width, photoSpec.height, photoSpec.x, photoSpec.y).stream().pipe(writeStream);
});
}
I use graphics magic to crop the image and it works. However to see the image cropped you have to refresh the page manually, which is not what I want to do. I wrote the following code in the photo helper, but it does not change the photo even though the re subscription takes place. The page still needs to be refreshed.
Template.profile_photo.helpers({
replace_upload_photo: function() {
return Session.get("replace_upload_photo");
},
profile_photo: function() {
var controller = Iron.controller();
var id = controller.state.get('profileId');
var photoHandle = Meteor.subscribe('profile_photo', id);
if (Session.get("crop")) {
console.log
photoHandle.stop(); //Deletes the profile photo subscription and re subscribes by using the handler
Session.set("crop", false);
photoHandle = Meteor.subscribe('profile_photo', id);
}
return PhotoCollection.findOne({parentId: id, photoType: "profile"});
}
});

Related

How to get a gif to show up on a blob

I have a function that brings users to a blob when a button is clicked and selections are made. The point is for them to click a download button and it take them to a blob with the gif on the page made based off their selections. I have working js/html/css that creates and downloads the gif for them but I am trying to now make code that makes the gif appear on the blob. It is successfully taking users to the blob but the gif is not appearing on the page. Any help would be appreciated.
js for creating the gif and sending users to the blob.
var directory = '/directory/here';
// add an event listener for the 'change' event on the dropdown menu
dropdown_fg2.addEventListener('change', function() {
// check if the selectedValue1 and selectedValue2 variables have been assigned values
if (!isNaN(selectedValue1) && !isNaN(selectedValue2)) {
// create an array of images
var images = [];
// set the starting image
var startImage = selectedValue1;
// set the ending image
var endImage = selectedValue2;
// set the step size for the images
var step = 6;
// create a loop to add the images to the array
for (var i = startImage; i <= endImage; i += step) {
var filePath = directory +"gfs_6hr_2m_temp_hour_"+i+ '.png';
// add the image to the array
images.push(filePath);
}
const downloadButton = document.getElementById('download-button2');
// Handle the button click
downloadButton.addEventListener('click', function () {
/// Generate gif
gifshot.createGIF({
'images': images,
'gifWidth': 1144,
'gifHeight': 894,
'interval': 0.33
},function(obj) {
if(!obj.error) {
const reader = new FileReader();
// Read the contents of the image file as a ArrayBuffer
reader.readAsArrayBuffer(obj.image);
reader.onload = function() {
// Create a Blob object that represents the GIF file
const gifBlob = new Blob([reader.result], {type: 'image/gif'});
// Use the URL.createObjectURL() method to create a URL for the Blob
const gifUrl = URL.createObjectURL(gifBlob);
console.log(gifUrl)
window.open(gifUrl);
// You can then use the URL to open the GIF file in a new window or to display it on your website
// var animatedImage = document.createElement('img');
var animatedImage = document.getElementById('my-image')
animatedImage.src = gifUrl;
console.log(animatedImage)
}
});
});
console.log(images);
}
})

Preloading then adding additional images after page load to an image gallery on button click

I am building an image gallery that is populated from a JSON file. Everything works as intended currently, but as of right now there is no pre-loading of content after the initial page load. What I would like to happen is after the "view more" button is clicked I will have some "loading" text show, the batch of images will preload, the "loading" text will disappear, then the images will be added to the page once all items have loaded.
Here is the section of the code that involves the JSON fetch request and the building of elements on the page:
var HTML = '';
var itemsStart = 6; // Starting number of items on page.
var itemsAdd = 9; // Number of items to add to page at a time via button click.
var pItems = document.getElementById('pItems');
var pWrapper = document.getElementById('pItemWrapper');
function addProjects() {
pItems.insertAdjacentHTML('beforeend', HTML);
console.log('BUILD PROJECTS');
}
//Load json
fetch('data/projects.json').then(function (response) {
return response.json();
}).then(function (data){
//Loop through first set of items to load on page.
for (var i = 0; i < itemsStart; i++) {
HTML += '<img src="' + data.projects[i].Image + '" alt=""></img>';
if (i == (itemsStart - 1)) {
addProjects();
}
}
//Load additional items when clicking 'view more'.
document.getElementById('view-more').addEventListener('click', function() {
HTML = '';
for (var i = itemsStart; i < itemsStart + itemsAdd; i++) {
if ((i < data.projects.length)) {
HTML += '<img src="' + data.projects[i].Image + '" alt=""></img>';
}
if (i == ((itemsStart + itemsAdd) - 1) ) {
addProjects();
}
}
itemsStart = itemsStart + itemsAdd;
});
}).catch(function(error) {
console.error('Something went wrong');
});
I'm not using jQuery so I'd like to stick to vanilla js. I don't know what I need to add to my button event listener beyond what I have, I've never tried preloading images like this without using a plugin but I feel like I don't need to load an entire plugin just for this one thing and I'd like to understand how this would work.
EDIT
I feel like I'm almost there, but I still have something wrong. I made some modifications to have each item inside its own container, but instead of that happening I am creating an empty container for each pass of the loop, then the last container gets each image added to it. My code looks like this:
var itemsAdd = 3;
//Load additional items when clicking 'view more'.
document.getElementById('view-more').addEventListener('click', function() {
//The loop will add the next 3 items in the json file per click.
for (var i = itemsStart; i < itemsStart + itemsAdd; i++) {
var placeholder = document.createElement('div');
var src = 'img/portfolio/' + data.projects[i].url;
placeholder.innerHTML= '<div class="img-container">' + data.projects[i].Title + '</div>';
var galleryItem = placeholder.firstChild;
preloadImage(src).then(function (image) {
galleryItem.append(image);
});
pItems.append(galleryItem);
}
itemsStart = itemsStart + itemsAdd;
});
The result I get is this:
Is this because of how the promise works for the preloadImage function?
Generally you would create an image with JavaScript through either document.createElement('img') or the Image() constructor. Both result an in instance of an HTMLImageElement.
With this, you'll have an image that is not connected to the DOM, so it's not visible to you or the user. You can use this element to load the image behind the scenes by setting the image' src property.
Then by listening to the onload event you can determine whenever the image has finished loading. From here you could continue your flow by adding the image to the DOM and, for example, fade it in with animation.
The example below shows this process in the form of a function that returns a Promise. This promise will resolve whenever the load event has been triggered.
const preloadImage = src =>
new Promise(resolve => {
const image = new Image();
const onLoad = () => {
resolve(image);
};
image.addEventListener('load', onLoad, {once: true});
image.src = src;
});
Using it should be like this:
const src = 'http://example.com/my-image.jpg';
preloadImage(src).then(image => {
// Here the image has been loaded and is available to be appended, or otherwise.
document.body.append(image);
});
In your case you would loop over each image, call the function while passing the URL of the image, and append the image to the DOM when it's finished loading.
You can handle any animations, like fade-ins with CSS.
Real world implementation
So how should you implement this in your project? You'll need to start at the point where you create your images. Currently your images are created as strings. But strings are just strings, they aren't HTML elements, yet.
I'd recommend that you'll create a placeholder for each image. This placeholder could visually indicate that an image is loading and act as a wrapper for the image. Add this placeholder immediately to the pItems element.
Then load the image for each Image in your data.projects array by calling the preloadImage. Whenever the image is loaded, append it to the placeholder we've just created. You should now have the effect that first a placeholder is added and the images are starting to appear one by one.
The same logic should be applied for the load more loop.
...
}).then(function (data){
for (let i = 0; i < itemsStart; i++) {
// Create a <div class="placeholder"> which should act as a placeholder / wrapper.
const placeholder = document.createElement('div');
placeholder.classList.add('placeholder');
// Create the image based on the Image value.
// Whenever the image is loaded, add it to the placeholder.
const src = data.projects[i].Image;
preloadImage(src).then(image => {
placeholder.append(image);
});
// Immediately add the placeholder.
// This line doesn't wait for preloadImage to finish because preloadImage is asynchronous. Look into Promises if that is new to you.
pItems.append(placeholder);
}
...
});
From here you've got control over how the placeholder should look and any animations an image inside that placeholder should have.
I think you could put a <div> with black background over the loading image using css and when the image is ready remove it with js. You can detect when the image is loaded using the img.onload = () => {} function.
Or you could place there an img with the loading screen and replace it with the actual image when the image has loaded.

Load all images inside a class

I am loading 52 images that share the same class, when printing the loaded images to the console the amount of images that are outputting change each time I refresh.
The desired output would be to load every image in the class, as I am trying to tracking the progress with a progress bar then display the image gallery.
var thumbs = document.getElementsByClassName("thumbImg");
var thumbTotal = thumbs.length;
console.log("number of thumbImg's = ", thumbTotal);
$(".thumbImg").on("load", function() {
console.log("the following has loaded = ",this);
});
This outputs the following showing the random amount of images loaded.
May be due to browser caching. You can try checking each image's .complete property, and run the code immediately if already complete.
$(".thumbImg").each(function(i, el) {
if (el.complete) {
handler.call(el);
} else {
$(el).on("load", handler);
}
})
function handler() {
console.log("the following has loaded = ",this);
}

Darkroomjs Image Cropping Post to PHP

Does anybody know how to post the cropped image to PHP using darkroomjs?
Link here: https://github.com/MattKetmo/darkroomjs
I want to upload the cropped image to the server. Also, how do I set the location of the cropped image to appear in a different HTML element.
For example, if when I hit the crop button in darkroomjs it updates the cropper canvas with the new image. How do I make it also move the cropped image to another HTML element on the page?
Thanks in advance.
I have a working version of this - it took me an hour or so to figure out and steal some other peoples suggestions mixed it all together and aletered a few bits here and there and here it is...
I parse the filename into JavaScript from my html from a hidden input type that was popuated by php ($('#profile_pic_filename').val();)
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();
}
});
}
in my ajax file i take the image and decode the base 64 version of the image and then parse that into a function with the filname that then overwrites the original file and hey presto the image has been replaced on the server.
$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);
I've just placed xxxxx into file path as I don't want to give up any server info.
If all is successfull you get a page reload and the newly transformed image loads on the page but if there is an error it will alert you.
Theoretically, in order to post the image to PHP you want to get the src contents of the <img> element which is stored in Base64 in the case of this plugin.
Once you grab that value using JQuery, you can send it to the server asynchronously using AJAX or by posting your form the regular way by putting the src contents into a hidden field somewhere. From that point you can use tools such as PHP's GD and Image functions or Intervention / Image to create an image file on the server from that Base64 data.
In your case, sending it asynchronously by just grabbing the <img src="base64img"> would probably be easiest.
$('#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
});
It's my understanding that cropping the image and saving it should reflect the changes within the Base64, but I personally and someone else is actually having problems with that.
In order to do the other stuff you want to do, you should be able to do it fairly easily with JQuery (look up restructuring the DOM). Just hook into the events:
// 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
});
}
You should be careful with moving the image after it's been edited, however. It could throw JavaScript errors if the plugin is expecting certain elements to be in certain locations.
UPDATED WITH SOLUTION:
======================
The src of the image will never change. In order to get the Base64 code of the edited image, you actually need to ask the canvas for it. Here is how you can do it:
// 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;
}
}
}

call backs / que loading - call function after complete

What would be the best way to call render() once all the imageData vars have been populated?
would I just call them all in sequence using callbacks, and call render, or is there a better method?
function loadImageData()
{
//Get Background Image Data
var backgroundImg = loadImage(background, function(){
backgroundData = getDataFromImage(backgroundImg);
});
//Get Overlay Image Data
var overlayImg = loadImage(overlay, function(){
overlayData = getDataFromImage(overlayImg);
});
//Get more Image Data
//Get more Image Data
//Get more Image Data
}
function render()
{
ctx.putImageData(backgroundData, 0,0);
}
From inside the callbacks, "render" the individual image elements onto the canvas.
var backgroundImg = loadImage(background, function(){
backgroundData = getDataFromImage(backgroundImg);
ctx.putImageData(backgroundData, 0,0);
});
My approach would include creating a "counter" of the number of callbacks you need, something like this:
function loadImageData()
{
var counter = 5;
function imageReceived() {
if (--counter == 0) render();
}
//Get Background Image Data
var backgroundImg = loadImage(background, function(){
backgroundData = getDataFromImage(backgroundImg);
imageReceived();
});
//Get Overlay Image Data
var overlayImg = loadImage(overlay, function(){
overlayData = getDataFromImage(overlayImg);
imageReceived();
});
//Get more Image Data
//Get more Image Data
//Get more Image Data
Of course, I would probably rewrite it in such a way that the number of waiting requests was increased in the loadImage() function, and have a global callback that gets fired whenever the number of requests waiting gets back to 0.

Categories