We Keep Coding

Using html2canvas to convert to image on keyup & keypress

I am building a application where user can write something inside input and it will be converted to a image they can download.
I use html2canvas.js for converting text to a downloadable image (this part works fine)
Currently it take the text inside <div id="talltweets"></div> and converts it to a image, but what I want is to be able to change the text/image when writing text inside input.
I tried to make a function called edValueKeyPress and it takes whats inside the input and adds it into <div id="talltweets"></div>, Now how can I take the text inside #talltweets and add it to <img id="textScreenshot"/> in realtime/when writing?
This is my code:
html2canvas(document.getElementById("talltweets"), {
onrendered: function(canvas) {
var screenshot = canvas.toDataURL("image/png");
document.getElementById("textScreenshot").setAttribute("src", screenshot);
}
});
function edValueKeyPress() {
var edValue = document.getElementById("body");
var s = edValue.value;
var lblValue = document.getElementById("talltweets");
lblValue.innerText = s;
}
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<input type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()" id="body">
<div id="talltweets"></div>
<!-- The PNG image will be added here-->
<div>
<img id="textScreenshot" />
</div>

Basically, you need to wrap that whole rendering step of the process into a function that can then be called with the keypress event. You're already on the right track - here's one way you could implement this (plus a few miscellaneous code improvements; also, I had to change the URL for html2canvas to pull from a different cdn, as the original one wasn't loading correctly from SO):
// If we store these, we only need to query the dom once, not on every update
var tallTweets = document.getElementById('talltweets');
var screenshotImg = document.getElementById('textScreenshot');
var textInput = document.getElementById('body');
// Note - it wouldn't surprise me if html2canvas has a specific API
// for doing this kind of update. Worth checking their documentation for.
function updateImage() {
html2canvas(tallTweets, {
onrendered: function(canvas) {
var screenshot = canvas.toDataURL("image/png");
screenshotImg.setAttribute("src", screenshot);
}
});
};
function edValueKeyPress() {
tallTweets.innerText = textInput.value || '';
updateImage();
}
updateImage();
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<input type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()" id="body" placeholder="Type something!">
<div id="talltweets"></div>
<!-- The PNG image will be added here-->
<div>
<img id="textScreenshot" alt="Generated screenshot" />
</div>
You could also make it even simpler by combining the two functions into one - IE, moving tallTweets.innerText = textInput.value into updateImage, and then binding the event listener to updateImage instead. But keeping them separated has its advantages, especially if you might want to reuse updateImage elsewhere.

angularjs: Change checkbox to image on selection

I want to implement a functionality in which, whenever a user checks a checkbox, it will get replace with a check image. For example:
So if I select first option it should get replace with a check image.
I am able to replace the checkbox with image, but this new element looses the ng-click event.
Below is the code:
currentController.changeChoice = function ($event, value) {
if ($event.target.checked) {
currentController.selectedOptions.push(value);
$($event.target).replaceWith('<div ng-click="stock.changeChoice($event,option);"><img src="../images/check.png" alt="remove" ng-checked="stock.selectedOptions.indexOf(option) > -1" /> </div>');
}
else {
var index = currentController.selectedOptions.indexOf(value)
currentController.selectedOptions.splice(index, 1);
}
};
below is the html generated for the new element (image)
<div ng-click="stock.changeChoice($event,option);"><img src="../images/check.png" alt="remove" ng-checked="stock.selectedOptions.indexOf(option) > -1"></div>

If angular way you have to use ng-show(or ng-if) for hide or show image and checkbox depends of the state. They both have to use same on-click callback. Here is the basic idea on pseudocode
<input ng-show="!is_checked" ng-click="callback()" ... />
<img ng-show="is_checked" ng-click="callback()" ... />

Jquery toggle img attribute

I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});

You can use data for store source string and toggling images
preview on : https://jsfiddle.net/5kxf65Lx/
<img src="source1.jpg" data-srcfirst="source1.jpg" data-srcsecond="source2.jpg" />
<script type="text/javascript">
$('img').click(function(){
var loaded = $(this).attr('src')
var first = $(this).data('srcfirst')
var second = $(this).data('srcsecond')
if(loaded == first){
$(this).attr('src' , second)
} else {
$(this).attr('src' , first)
}
})

Try this. When the parent is clicked we toggle both children. The large version starts off hidden.
<div class="toggle js-toggle">
<img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
<img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>
The jQuery
$('.js-toggle').on('click', function() {
$(this).find('.js-toggle-image').toggle();
});
https://jsfiddle.net/uoLv2nkh/1/
Or an only CSS way if you only care about when the user is clicking.
https://jsfiddle.net/uoLv2nkh/

You can achieve your target via setting src of image in css.
.imageOne{
content:url(YOUR SOURCE);
}
.imageTwo{
content:url(YOUR SOURCE);
}
add class to your image element in start
check if element exist by either class if exist toggle() to another, this will change the image back to another.
And use toggle() like following example
$(".browseTable").on('click', 'td', function () {
//var thumbNail = $(this).parent('tr').find('img').attr('src');
//var feature = $('#featureImg img').attr('src');
//$('#featureImg img').fadeOut(400, function () {
// $(this).fadeIn(400)[0].src = thumbNail;
//});
$('#featureImg img').find('.imageOne, .imageTwo').toggle();
});
I am able to use toggle simply to change one element to another. etc. hope it will help you.
Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Selecting 4 images from the list

I want to create a list of hundred image boxes (50x50 px), and I wanna be able to choose four of them. To check the fifth one, I'd have to uncheck one of the previous ones.
I have found jQuery UI selectable component to do this, I could be able to use ajax to dynamically save information to the database (everything has to be stored in the database here).
The problem is that I couldn't find options to limit selection to 4, and I couldn't find the option to select elements by default after the page is loaded.
How can I do what I want to?
Right now I only have jQuery code:
$("#selectable").selectable();
An SQL choosing images and simple for loop generating those boxes.
Thanks!

This will limit to the first 4 selections using jQueryUI selectable
function clearOverlimitSelections(evt, ui) {
var selectableClasses = {
selectableselecting: 'ui-selecting',
selectableselected: 'ui-selected'
},
selectableClassName = selectableClasses[evt.type];
var $selection = $(this).find('.' + selectableClassName);
if ($selection.length >= 4) {
$selection.filter(':gt(3)').removeClass(selectableClassName)
}
}
$("#selectable").selectable({
selecting: clearOverlimitSelections,
selected: clearOverlimitSelections
});
DEMO

Suppose you have this:
<img class="select-4" ...>
<img class="select-4" ...>
...
<img class="select-4" ...>
The following jQuery code should select a maximum of 4 images:
$('img.select-4').on('click', function(){
var iAmSelected = $(this).hasClass('selected');
if (iAmSelected) {
$(this).removeClass('selected');
} else {
var canAddSelection = $('img.select-4').length < 4;
if (canAddSelection) {
$(this).addClass('selected');
}
}
});
Then, you can use the selected class to style your selected images as you like. The same technique can be used with <input type="checkbox"> elements.

Replacing the source attribute of multiple JQuery selectors

I'm trying to get it when a button is clicked, all buttons are given the Off state, (src is btnCircuitxOff.gif) and the one selected is given the On state (src is btnCircuitxOn)
That is clicking one will deselect the others and select itself, this is only visual feedback for a physical device on the other end of an ajax query, otherwise I would use radio buttons themselves.
So far I have,
Html / css
<div id='controls'>
<input type="image" class = "Circuit _100" src="btnCircuit100Off.gif" onclick="selectCircuit('100');"/>
<input type="image" class = "Circuit _10K" src="btnCircuit10KOff.gif" onclick="selectCircuit('10K');"/>
<input type="image" class = "Circuit _100K" src="btnCircuit100KOff.gif" onclick="selectCircuit('100K');"/>
<input type="image" class = "Circuit _1M" src="btnCircuit1MOff.gif" onclick="selectCircuit('1M');"/>
<input type="image" class = "Circuit _10M" src="btnCircuit10MOff.gif" onclick="selectCircuit('10M');"/>
<input type="image" class = "reset" src="btnReset.gif" onclick="reset();"/>
</div>
Javascript
function selectCircuitButtons(s)
{
$(".Circuit").attr("src",$(".Circuit").attr("src").replace("On","Off"));
$("._"+s).attr("src",$("._"+s).attr("src").replace("Off","On"));
}
Which almost seems to work, except that as soon as I click something, every image gets replaced with btnCircuit100Off instead of their individual btnCircuitxOff images.
I'm almost sure I almost have a solution, but how can I store each selector to use when editing the src element?
I've looked at .each and $(this) but I'm new to JQuery and am having troubles formulating a solution.
Also suggestions for a good title are welcome.

You need to read the current value of the attribute for each element, rather than always reading a single value.
To help you with that, jQuery allows you to pass a callback:
$(".Circuit").attr("src",
function(elem, oldSrc) { return oldSrc.replace("On","Off"); }
);

You can use $.each to iterate through each matching item
function selectCircuitButtons(s) {
$(".Circuit, ._"+s).each(function(index,item){
$(item).attr("src",$(item).attr("src").replace("On","Off"));
});
}

You need to iterate through circuite using $.each
You have to toggle each image name along element has class or not:
function selectCircuitButtons(s) {
$(".Circuit").each(function() {
var hasS = $(this).hasClass("_"+ s);
if(hasS) {
$(this).attr("src", $(this).attr("src").replace("Off","On"));
} else {
$(this).attr("src", $(this).attr("src").replace("On","Off"));
}
});
}
EDIT simpler (with #SLaks technique):
function selectCircuitButtons(s) {
$(".Circuit").attr("src", function(elem, oldSrc) {
return $(elem).hasClass("_"+ s) ?
oldSrc.replace("Off","On") : oldSrc.replace("On","Off");
});
}