In a processing drawing loop, I have an algorithm that uses face detection to trigger a picture being taken. However so far I cannot get the image to display in my drawing loop. Does anyone know how to halt a drawing loop until an image is loaded and displayed? Here's the section of my drawing loop:
if (faces.length > 0) {
save("Source/face.jpg");
PImage img = loadImage("Source/face.jpg");
image(img,0,0);
} else {
println("not seeing anything");
}
Obviously this isn't working, how do I dynamically load and display images in processing?
I have this function in javascript
loadimage: function(image, i) {
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#loader'+i).append(this);
$('#loading'+i).removeClass('image-container-loading');
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src',image).css('width','50px').css('height','50px').css('position','absolute');
}
Called:
self.loadimage('http://www.test.com/files/images/hi.jpg,ide);
html:
<li class='promotion'><span class='image-container' id='loader"+ide+"'>
<span class='units'></span>
<span style='border: solid 0px' class='image-container-loading' id='loading'>
</span></li>
Related
I am using Angular 4 with TypeScript for a web application. I am allowing users to upload a thumbnail profile photo from their device as either a png, jpeg, or jpg, and I want to convert that photo to a jpg on the frontend. I am looking for some way to do this, as the file type is readonly.
The reason that I am doing this is so that when users load the profile page, they don't have to download large images so the page is quick. I think that converting to a jpg might be the best bet because when tested with a sample image, a png of an image was 35.4KB while a converted jpg of the same image was 6.7KB. If there is a better solution, I would love to hear it!
Thank you in advance!
I just wrote some code like your requirements, here is what I did:
load a local image by FileReader and add a listener to its onload event
in the onload listener, create an "Image" object by new Image(), and set "src" attribute by the loaded image "src" (Data URL format)
create a "Canvas" element, and draw the image on this canvas
use Canvas.toDataURL() to fetch the converted image data (in base64)
post the image data to server
After you draw an image to canvas, call Canvas.toDataURL() will get the canvas content in Data URL string, please note that it's the canvas data not original image data, for example, if image size is 100 x 100 and canvas size is 50 x 50, you'll get an image in 50 x 50 pixel with this function, so if you want a full size image, you need to resize the canvas to the certain size.
this function has two parameters:
canvas.toDataURL(type, encoderOptions);
type - A DOMString indicating the image format. The default format type is image/png. in your code, set to "image/jpeg" in your case
encoderOptions - A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.
Here is my "preview and upload" function write in TypesScript for reference:
preview(input: HTMLInputElement) {
if (input.files.length) {
let reader = new FileReader();
reader.onload = (e) => {
if (!this.img) {
this.img = new Image();
}
this.img.src = (e.target as any).result;
this.img.onload = () => {
// omit code of setting 'dx', 'dy', 'width', 'height'
let ctx = <CanvasRenderingContext2D>this.canvas.nativeElement.getContext('2d');
ctx.drawImage(this.img, dx, dy, width, height);
let dataUrl = (<HTMLCanvasElement>this.canvas.nativeElement).toDataURL('image/jpeg', 0.7);
this.uploadService.upload(dataUrl).then((resp: any) => {
if (resp.key) {
this.asset.image = resp.key;
}
});
};
}
reader.readAsDataURL(input.files[0]);
}
}
I omitted some variables: dx, dx, width, height in the above code, I use these variables to adjust image position (for clipping purpose).
This is JavaScript example:
function _elm(id) {
return document.getElementById(id);
}
_elm('fileInput').onchange= function(event) {
if (event.target.files.length) {
var fileReader = new FileReader();
fileReader.onload = function(event) {
var img = new Image();
img.src = event.target.result;
_elm('sizeRaw').innerText = '+ data-url size ' + event.target.result.length;
img.onload = function() {
var canvas = _elm('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, 200, 200);
var dataUrl = canvas.toDataURL('image/jpeg', 0.5);
_elm('output').innerText = dataUrl;
_elm('sizeNew').innerText = '+ data-url size ' + dataUrl.length;
}
};
fileReader.readAsDataURL(event.target.files[0]);
}
};
#canvas {
border: 1px solid blue;
}
#output {
word-break: break-all;
}
<h3>Input file <span id="sizeRaw"></span>: </h3>
<input id="fileInput" type="file" accept="image/*">
<h3>Canvas</h3>
<div>
<canvas id="canvas" width="200" height="200"></canvas>
</div>
<h3>Output <span id="sizeNew"></span>: </h3>
<div id="output">
</div>
I'm using Greensock's LoaderMax to parse an XML doc and load thumbnails and large images onto the stage - the large images are hidden off screen initially.
What I'd like to do is click on a thumbnail and have the large image tween into place, I have assigned the same name to the relevant thumbnail and image, ie 0 in thumbs corresponds to the 0 image
Thumbnails have been added to a movieclip named mc2, images are in a mc called bigDocWrap
Here's my attempt:
function callFull(event:MouseEvent):void
{
var clicked = [event.target.name];
if (isUp == true) {
// Do some stuff
fadeOut.addEventListener(TweenEvent.MOTION_FINISH, end);
function end(event:TweenEvent) {
// Some more stuff
// Animate large image in
mcDocIn = new Tween (clicked, "y", Strong.easeOut, clicked.y, -650, 1, true);
}
}
}
This didn't work - undefined reference error
mcDocIn = new Tween (bigDocWrap.clicked, "y", Strong.easeOut, bigDocWrap.clicked.y, -650, 1, true);
You are passing Name of object and not object to new Tween(). Use event.currentTarget or event.target, depends on your need.
I have updated your code like so:
function callFull(event:MouseEvent):void
{
if (isUp == true) {
// Do some stuff
fadeOut.addEventListener(TweenEvent.MOTION_FINISH, end);
function end(event:TweenEvent) {
// Some more stuff
// Animate large image in
mcDocIn = new Tween (event.currentTarget, "y", Strong.easeOut, clicked.y, -650, 1, true);
}
}
}
This section of code in my /js/global.js file activate each image to open in a new window when clicked. Is it possible to alter this code to have each open in a FancyBox instead? I have downloaded a FancyBox plugin for a Vanilla forum I am running, and it currently only targets images embedded in posts After You Click On The Post Itself. On the main page, clicking on an image opens a new window.
// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() {
var props = ['Width', 'Height'], prop;
while (prop = props.pop()) {
(function (natural, prop) {
jQuery.fn[natural] = (natural in new Image()) ?
function () {
return this[0][natural];
} :
function () {
var
node = this[0],
img,
value;
if (node.tagName.toLowerCase() === 'img') {
img = new Image();
img.src = node.src,
value = img[prop];
}
return value;
};
}('natural' + prop, prop.toLowerCase()));
}
jQuery('div.Message img').each(function(i,img) {
var img = jQuery(img);
var container = img.closest('div.Message');
if (img.naturalWidth() > container.width() && container.width() > 0) {
img.wrap('');
}
});
// Let the world know we're done here
jQuery(window).trigger('ImagesResized');
});
Add an specific class to your wrapped images, modifying this line
img.wrap('');
... into this :
img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');
Then bind fancybox to that selector (".fancybox") in a custom script like :
$(".fancybox").fancybox();
This assumes that you have properly loaded the fancybox js and css files.
Aloha Stockoverflow.
In advance, thank you!
I am trying to modify my randomly changing background on my webpage, to add a FADE effect, so the change from 1 background to another is not so sudden and sharp.
I have tried to search through the web endlessly for a solution to my issue, but it all points towards adding a jQuery plugin which I would preferably avoid if it is possible.
My working code is as follows and needs to have added some kind of fadein / fadeout effect.
<script type="text/javascript">
var num;
var temp=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var preloads=[];
/* add any number of images here */
preload(
'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg',
'images/bg5.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
if(num==temp){
rotateImages();
}
else {
document.body.style.backgroundImage='url('+preloads[num].src+')';
temp=num;
setTimeout(function(){rotateImages()},speed);
}
}
if(window.addEventListener){
window.addEventListener('load',rotateImages,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',rotateImages);
}
}
</script>
Thank you very much for taking the time to look at it. :)
How to do it without plugins:
Use 2 layers for the background image, position them on top of each other.
Init the page with the first image on the bottom layer, make the top layer invisible (using CSS opacity property, make sure to Google this, different browsers use different approaches).
When fading:
Set the new image for the top layer.
Use a short, looping (frameduration < 40ms) setTimeout to increment the opacity of your top layer to 1. Use increments of 1/(speed/frameduration).
When comletely faded in, set the bottom layer to use the new (now visible) image, and set the top layer to opacity 0.
Like this:
<html>
<head>
<script type="text/javascript">
var num;
var current=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var fps = 25;
var fadeDuration = 1000;
var opacityIncrement = 1/(fadeDuration/(1000/fps));
var preloads=[];
var topLayerOpacity = 0;
var topLayer = document.createElement("div");
var bottomLayer = document.createElement("div");
setOpacity(topLayer, 0);
/* add any number of images here */
preload(
'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg'
);
function loadComplete(){
//add layers to background div
document.getElementById('backgroundContainer').appendChild(bottomLayer);
document.getElementById('backgroundContainer').appendChild(topLayer);
rotateImages();
}
function preload(){
//preload images
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
// selecte new random image from preloads and start fade-in
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
//don't select current image
if(num==current){
rotateImages();
}
else {
topLayer.style.backgroundImage = 'url('+preloads[num].src+')';
current=num;
//start fade-in
fadeIn();
setTimeout(function(){rotateImages()},speed);
}
}
// fade in topLayer
function fadeIn(){
if (topLayerOpacity < 1){
topLayerOpacity += opacityIncrement;
setOpacity(topLayer, topLayerOpacity);// opacityIncrement);
setTimeout(fadeIn, 1000/fps);
}else{
fadeInComplete();
}
}
//return opacity for element
function getOpacity(el){
alert (el.style.opacity);
return el.style.opacity;
}
//sets opacity on element
function setOpacity(el, val){
el.style.opacity = val;
el.style.filter = 'alpha(opacity=' + val*100 + ')';
}
//called when fadeIn completed
function fadeInComplete(){
bottomLayer.style.backgroundImage = topLayer.style.backgroundImage;
topLayerOpacity = 0;
setOpacity(topLayer, topLayerOpacity);
}
if(window.addEventListener){
window.addEventListener('load',loadComplete,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',loadComplete);
}
}
</script>
<style type="text/css">
#backgroundContainer{
width:100%;
height:100%;
position:absolute;
/*background-color:green;*/
}
#backgroundContainer div{
width:100%;
height:100%;
position:absolute;
top:0;
}
.page {
width:100%;
text-align:center;
position:absolute;
}
.contents{
width:400px;
margin:0 auto;
background-color:lightblue;
}
</style>
</head>
<body>
<!-- holds background layers -->
<div id="backgroundContainer"></div>
<!-- substitutes for 'body' on this webpage -->
<div class="page">
<!-- contents for your webpage, through css centered within page-div -->
<div class="contents">
<p>Contents</p>
</div>
</div>
</body>
</html>
OR
Use jQuery/mootools/script.aculo.us/...
Best of luck!
I'm using the iviewer plugin with a lightbox and I have issue to center my image everytime it load a new image.
I know that there is a pre-built method center() I just don't undertand how and where to call it.
You can find the function I'm using under. The function is called when I click on an element, it open a box div(#iviewer). In which I would like my image center. I also use a zoom pourcentage at the beginning so my image doesn't fit the box (var viewer).
function open(src, id) {
var firstZoom = true;
$("#iviewer").fadeIn().trigger('fadein');
var viewer = $("#iviewer .viewer").
width(920).
height(560).
iviewer({
src : src,
ui_disabled : true,
zoom : '50%',
initCallback : function() {
var self = this;
},
onZoom : function() {
if (!firstZoom) return;
$("#iviewer .loader").fadeOut();
$("#iviewer .viewer").fadeIn();
firstZoom = true;
}
}
);
//load new pic
viewer.iviewer('loadImage', src);
}
Thanks for the help.
The "onFinishLoad" callback hook in the initialization worked for me:
onFinishLoad: function(ev, src){ viewer.iviewer('center')}