We Keep Coding

Why img.onload() function not working on ipad for exporting my chart data in pdf format?

I am trying to export my chart data consisting of image and data in a PDF. It works fine for me in laptop browser, but while I am trying to do the same in Ipad, the img.onload() function is not firing. I am not sure but I feel like it is due to the size of the image that is rendering in it. Can anybody help me with it? Can we change the pixels of the image that is being rendered?
The code is given below:-
function exportData(exportType) {
if (exportType) {
if (exportType == "pdf") {
alert("clicked pdf")
console.log("pdf export ....")
vm.toggleCanvas = !vm.toggleCanvas;
var canvas = "";
var ctxt = "";
// var img = "";
var sheets = "";
var svgURL = "";
canvas = document.getElementById('canvas');
$log.log($window.screen.width)
//resizing image for PDF
if ($window.screen.width >= 1500) {
canvas.width = $window.screen.width - 150;
} else {
canvas.width = $window.screen.width;
}
console.log("before canvas")
ctxt = canvas.getContext('2d');
sheets = document.styleSheets;
svgURL = generateSVGWithStyling('svg');
// var img = document.createElement('img');
var img = new Image();
console.log("after image")
console.log(img)
alert("imb")
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
img.onload = function () {
debugger
console.log("in load")
alert("in load")
ctxt.drawImage(this, 0, 0);
vm.cnvasImg = "";
vm.cnvasImg = canvas.toDataURL();
var content = "";
console.log("on load")
subExportData(vm.cnvasImg, exportType);
}
console.log(img.src)
} else {
vm.cnvasImg = "nothing";
subExportData(vm.cnvasImg, exportType);
}
}
}
Any help would be apprciated.

Can you please try with passing the width, height properties to Image constructor Object.
var img = new Image(Width, Height);

how to make a variable of two variables

Before your read this, my first account was blocked because i asked bad questions.. So please dont vote negative but say what i am doing wrong
Sooo I have this script:
var img1 = new Image()
img1.src="image1.jpg"
var img2 = new Image()
img2.src="image2.jpg"
var img3 = new Image()
img3.src="image3.jpg"
function Canvas() {
var ctx = document.getElementById('slider').getContext('2d');
var pic=1
function slider() {
this.draw = function() {
if(pic<4){pic++}
else{
pic=1
}
var img = "img"+pic
ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height)
}
}
var slider = new slider();
function draw() {
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.save();
//draw
slider.draw();
//draw
ctx.restore();
}
var animateInterval = setInterval(draw,100)
}
window.addEventListener('load', function(event) {
Canvas();
});
I am trying to draw the image 1 or 2 or 3 on my canvas. But I also have the var pic wich has the number. So i tried ctx.drawimage(img+pic,0,0) or var img = "img"+pic and draw it then. But it doesnt work for me.
I hope you accept my question and can answer it, THNX

Use an array instead
var img = [];
/* you should use a for loop here */
for (var i = 0; i < 3; i++) {
img[i] = new Image();
img[i].src = "image" + (i+1) ".jpg";
}
and later you refer the right image with img[pic]. Be only sure to use an index between 0 and img.length - 1

Don't use separate variables, use an array.
var images = [ new Image(), new Image(), new Image() ];
for (var i = 0; i < images.length; i++) {
images[i].src = "image" + (i+1) + ".jpg";
}
Then refer to the array in the Slider() function:
var pic = 0;
function slider() {
this.draw = function() {
pic = (pic + 1) % images.length;
var img = images[pic];
ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height)
}
}

The error seems to be that you refer to the string "img1" and not the object img1. Try use an array instead.
Set the following:
...
var pic=0;
var img=[img1,img2,img3];
function slider() {
this.draw = function() {
if(pic<3){pic++}
else{
pic=0;
}
ctx.drawImage(img[pic],0,0,ctx.canvas.width,ctx.canvas.height)
}
}
...

How do I erase an image on html5 canvas

I have a html5 canvas where you can erase the blur on top of an image. I would like to replace the blur with another image. I would like the end result to be once you erase the top image the bottom image will appear below it. I have been using an easeljs demo as a template.
http://www.createjs.com/#!/EaselJS/demos/alphamask
I feel like what I need to edit is in the html page script but it might be much deeper than that.
(Full code can be viewed here)
HTML
<canvas id="testCanvas" width="960" height="400"></canvas>
JavaScript
var stage;
var isDrawing;
var drawingCanvas;
var oldPt;
var oldMidPt;
var displayCanvas;
var image;
var bitmap;
var maskFilter;
var cursor;
var text;
var blur;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
document.getElementById("loader").className = "loader";
image = new Image();
image.onload = handleComplete;
image.src = "images/summer.jpg";
stage = new createjs.Stage("testCanvas");
text = new createjs.Text("Loading...", "20px Arial", "#999999");
text.set({x:stage.canvas.width/2, y:stage.canvas.height-80});
text.textAlign = "center";
}
function handleComplete() {
document.getElementById("loader").className = "";
createjs.Touch.enable(stage);
stage.enableMouseOver();
stage.addEventListener("stagemousedown", handleMouseDown);
stage.addEventListener("stagemouseup", handleMouseUp);
stage.addEventListener("stagemousemove", handleMouseMove);
drawingCanvas = new createjs.Shape();
bitmap = new createjs.Bitmap(image);
blur = new createjs.Bitmap(image);
blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
blur.cache(0,0,960,400);
blur.alpha = .5;
text.text = "Click and Drag to Reveal the Image.";
stage.addChild(blur, text, bitmap);
updateCacheImage(false);
cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0,0,20));
cursor.cursor = "pointer";
stage.addChild(cursor);
}
function handleMouseDown(event) {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt;
isDrawing = true;
}
function handleMouseMove(event) {
cursor.x = stage.mouseX;
cursor.y = stage.mouseY;
if (!isDrawing) {
stage.update();
return;
}
var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
.beginStroke("rgba(0,0,0,0.15)")
.moveTo(midPoint.x, midPoint.y)
.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPoint.x;
oldMidPt.y = midPoint.y;
updateCacheImage(true);
}
function handleMouseUp(event) {
updateCacheImage(true);
isDrawing = false;
}
function updateCacheImage(update) {
if (update) {
drawingCanvas.updateCache(0, 0, image.width, image.height);
} else {
drawingCanvas.cache(0, 0, image.width, image.height);
}
maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);
bitmap.filters = [maskFilter];
if (update) {
bitmap.updateCache(0, 0, image.width, image.height);
} else {
bitmap.cache(0, 0, image.width, image.height);
}
stage.update();
}

If you simply want to replace the blur-image, you have to change the following parts:
Add this after the loading of the first image:
image.src = "images/summer.jpg";
// add new part
image2 = new Image();
image2.onload = handleComplete;
image2.src = "images/your_newImage.jpg";
In the handleComplete() you now wait for 2 images to be loaded, so you add this:
function handleComplete() {
loaded++; // and initialize this variable in the very top with: var loaded = 0;
if ( window.loaded < 2 ) return;
//... other stull
and finally you change the following lines:
// old
blur = new createjs.Bitmap(image);
blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
blur.cache(0,0,960,400);
blur.alpha = .5;
// new
blur = new createjs.Bitmap(image2);
This should now replace the blurred image with your desired image, it's not the best way, but it should get you there. I recommend you to start with some tutorial if you are planing to do more "deeper" stuff ;)

a common, though kinda janky, way is to re-size your canvas real quick. so changing your <canvas> elements width and height attributes. This will erase everything in your canvas.
Once that is done, reset it back to what you want it to be right away, and redraw the bottom image.
As I said this method is kinda sketchy but it does get the job done.

Javascript Sliding Images - How to add elements/classes

I have this Javascript sliding image script. It works great, but I would like to add text in the form of a paragraph tag to the sliding effect, one paragraph accompanying each image in the slide. How to do that?
My code:
<script language="JavaScript">
var image = new Array("images/ref1.png", "images/ref2.png",
"images/bb.png", "images/windows.png")
var imgNumber=1
var numberOfImg = image.length
function previousImage(){
if(imgNumber > 1){
imgNumber--
}
else{
imgNumber = numberOfImg
}
document.slideImage.src = image[imgNumber-1]
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.slideImage.src = image[imgNumber-1]
}
if(document.images){
var image1 = new Image()
image1.src = "images/ref1.png"
var image2 = new Image()
image2.src = "images/ref2.png"
var image3 = new Image()
image3.src = "images/bb.png"
var image4 = new Image()
image4.src = "images/windows.png"
}
</script>
<table>
<tr>
<td><img src="images/ref1.png" name="slideImage"></td>
</tr>
<tr>
<td><a href="JavaScript:previousImage()">
<img src="" border="none"/>prev</a>
</td>
<td><a href="JavaScript:nextImage()">
<img src="" border="none" />next</a>
</td>
</tr>
</table>
Thank You

Basically you just need to add an element to hold your text, an array that contains the text to rotate, and add a little JavaScript to make the changes.
Here's a jsFiddle example.
I added a new paragraph element with the ID of 'text' to your HTML, and in your JavaScript I created an array to hold the text. The text gets changed just like the images do using this line: document.getElementById('text').innerHTML = text[imgNumber - 1];.
JavaScript:
var image = new Array("http://www.dummyimage.com/60x60/&text=1", "http://www.dummyimage.com/60x60/&text=2", "http://www.dummyimage.com/60x60/&text=3", "http://www.dummyimage.com/60x60/&text=4");
var text = new Array('one', 'two', 'three', 'four');
var imgNumber = 1;
var numberOfImg = image.length;
function previousImage() {
if (imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.slideImage.src = image[imgNumber - 1];
document.getElementById('text').innerHTML = text[imgNumber - 1];
}
function nextImage() {
if (imgNumber < numberOfImg) {
imgNumber++;
}
else {
imgNumber = 1;
}
document.slideImage.src = image[imgNumber - 1];
document.getElementById('text').innerHTML = text[imgNumber - 1];
}
if (document.images) {
var image1 = new Image();
image1.src = "http://www.dummyimage.com/60x60/&text=1";
var image2 = new Image();
image2.src = "http://www.dummyimage.com/60x60/&text=2";
var image3 = new Image();
image3.src = "http://www.dummyimage.com/60x60/&text=3";
var image4 = new Image();
image4.src = "http://www.dummyimage.com/60x60/&text=4";
}​

Onmouseover and timeout on javascript

I have this id in my html code:
<div id="me">
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/>
</div>
how can i change the picture every 3 seconds once the mouse is over the picture,
and to go back to the original picture once the mouse is out?

You can create a function that will change the image every 3 seconds. Then, when you mouse over the image, call the function and start a timer. When the mouse leaves the image, clear the timer.
var img = document.getElementById( "me" ).getElementsByTagName( "img" )[0];
var images = ["Me.JPG", "new image path", "..."];
var i = 1;
var timer;
function change() {
img.src = images[i];
if ( ++i >= images.length ) {
i = 0;
}
timer = setTimeout( change, 3000 );
}
img.onmouseover = function() {
timer = setTimeout( change, 3000 );
};
img.onmouseout = function() {
img.src = images[0];
clearTimeout( timer );
};

Here's a link to a quick solution on JsFiddle: http://jsfiddle.net/jJBEu/2/
var img = document.getElementById('me').getElementsByTagName('img')[0],
index = 0,
sources = [
'http://icons.iconarchive.com/icons/iconka/social-treat/128/yumtube-icon.png',
'http://icons.iconarchive.com/icons/iconka/social-treat/128/sweeter-icon.png',
'http://icons.iconarchive.com/icons/iconka/social-treat/128/facebow-icon.png'
],
timer;
img.addEventListener('mouseover', swapImages, false);
img.addEventListener('mouseout', function(){
clearTimeout(timer);
img.src = sources[0];
}, false);
function swapImages(event, setindex){
index = index == (sources.length - 1) ? 0 : index + 1;
timer = setTimeout(function(){
img.src = sources[index];
swapImages();
}, 3000);
}
Edited to fix a dumb mistake where I was checking array index against length without subtracting 1.

html:
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"
onmouseover="animate(this)" onmouseout="stopanimation()" />
javascript:
/* globals */
var animTimer = null;
var animImg = null;
var images = [new Image(), new Image(), new Image(), new Image(), new Image(),new Image()];
var imgIndex = 0;
/* pre-load images in browser cash */
images[0].src = "Me.JPG";
images[1].src = "anim1.gif";
images[2].src = "anim2.gif";
images[3].src = "anim3.gif";
images[4].src = "anim4.gif";
images[5].src = "anim5.gif";
/* animation */
function animate(img){
if (typeof img != 'undefined'){animImg = img;}
imgIndex += 1;
if (imgIndex>images.length-1){imgIndex=1;}
animImg.src=images[imgIndex].src;
animTimer = setTimeout(animate, 3000);
}
function stopanimation(){
clearInterval(animTimer);
animImg.src = images[0].src;
}

Something like, just give the img an id of myImg (or whatever you want):
var img_arr = ["img1.png", "img2.png", "img3.png"],
img_index = 0,
interval_id = 0,
div = document.getElementById("me"),
img = document.getElementById("myImg");
div.onmouseover = function () {
interval_id = window.setInterval(function () {
if (img_index === (img_arr.length - 1)) {
img_index = 0;
}
img.src = img_arr[img_index++];
}, 3000);
};
div.onmouseout = function () {
window.clearInterval(interval_id);
};