Develop Reference

dom to image library generate low quality image

I used dom-to-image to download div content as image but it gives me a low quality image which is not clear
my code :
<script>
var node = document.getElementById('my-certificate');
var btn = document.getElementById('download-btn');
var options = {
quality: 0.99
};
btn.onclick = function() {
domtoimage.toBlob(node, options)
.then(function(blob) {
window.saveAs(blob, 'my-certification.png');
});
}
</script>
any idea in how to generate better quality ?

Use width and height in the options to scale up the node before the image will be renderd. (If you do not, the quality is like a screen-shoot)
var options = {
quality: 0.99,
width: 2000,
height: 2000,
};

Try this.
var scale = 2;
domtoimage.toBlob(domNode, {
width: domNode.clientWidth * scale,
height: domNode.clientHeight * scale,
style: {
transform: 'scale('+scale+')',
transformOrigin: 'top left'
})
This worked for me.

Zdog Box height won't grow

I'm making a 3D box with Zdog and I want to let the height of the box grow.
Here is a codepen: https://codepen.io/anon/pen/qzBMgp.
This is my code for the box:
let progressBox = new Zdog.Box({
addTo: progress,
width: 200,
height: boxHeight,
depth: 200,
stroke: 1,
})
This is the code I use to increase the height of the box. If the box is shorter than 400, the box will increase its height with 0.1.
function animate() {
if (boxHeight < 400) {
moveUp = 'up';
} else if (boxHeight > 400) {
moveUp = 'false';
}
boxHeight += moveUp == 'up' ? 0.1 : 0;
}
The problem is that the box stays at a height of 0 (the value I gave to boxHeight), but when I console.log(boxHeight) the boxHeight will grow.

First of all, let me point out that you cannot change the value of a constant . On your code, the boxHeight is declared as const.
Second, you will need to use Zdog's copy() method. Here is your code modified accordingly.
Zdog.Anchor.prototype.renderGraphSvg = function (svg) {
if (!svg) {
throw new Error('svg is ' + svg + '. ' +
'SVG required for render. Check .renderGraphSvg( svg ).');
}
this.flatGraph.forEach(function (item) {
item.render(svg, Zdog.SvgRenderer);
});
};
const TAU = Zdog.TAU;
const light = '#EAE2B7';
const yellow1 = '#FCBF49';
const orange1 = '#F77F00';
const red1 = '#d62828';
const purple1 = '#003049';
const white1 = '#ffffff';
const isSpinning = true;
var boxHeight = 0;
let progress = new Zdog.Illustration({
element: '.progress',
dragRotate: true,
translate: {
y: 25
},
rotate: {
x: -0.4, y: 0.75
}
});
let progressBox = new Zdog.Box({
addTo: progress,
width: 200,
depth: 200,
height: boxHeight,
stroke: 1,
color: purple1, // default face color
leftFace: yellow1,
rightFace: orange1,
topFace: red1,
bottomFace: light,
translate: {
x: 0,
y: 300
},
});
function animate() {
if (boxHeight <= 400) {
boxHeight++; // 1
progressBox = progressBox.copy({
height: boxHeight, // overwrite height
translate: {
y: progressBox.translate.y - 1 // overwrite vertical position to put box in place while height is growing.
}
});
}
progress.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
I forked your pen and updated it with the code above. See Zdog - progress box
Note that it seems to be expensive doing the copy() method on every animation frame. I am also new to this library and this is currently the fix I know of.

How to create sprite animation from particles animation by means of tweens?

Here is such a code snippet:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
var emitter;
function preload() {
game.load.image('wasp', 'assets/glass.png');
game.load.image('glass', 'assets/glass.png');
game.load.image('water', 'assets/blue-raster-floor.png');
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.tileSprite(0, 344, 800, 256, 'water');
emitter = game.add.emitter(game.world.centerX, 200);
emitter.makeParticles('glass');
emitter.setXSpeed(-200, 200);
emitter.setYSpeed(-150, -250);
emitter.bringToTop = true;
emitter.setAlpha(0.1, 1, 500);
emitter.setScale(-2, 2, 1, 1, 3000, Phaser.Easing.Sinusoidal.InOut, true);
emitter.gravity = 300;
emitter.start(false, 5000, 700, 50);
game.time.events.add(3000, destroyEmitter, this);
}
function tweens(cash) {
var bugs;
var index = 0;
var data;
var pos = [];
var tween;
var tweenData = { x: 0, y: 0 };
tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, "Sine.easeInOut");
tween.yoyo(true);
data = tween.generateData(60);
bugs = game.add.group();
pos.push(new Phaser.Point(32, 0));
pos.push(new Phaser.Point(300, 100));
pos.push(new Phaser.Point(600, 70));
bugs.create(pos[0].x, pos[0].y, 'wasp');
bugs.create(pos[1].x, pos[1].y, 'wasp');
bugs.create(pos[2].x, pos[2].y, 'wasp');
tween.onUpdateCallback(function () {
bugs.getAt(0).x = pos[0].x + data[index].x;
bugs.getAt(0).y = pos[0].y + data[index].y;
bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
bugs.getAt(1).y = pos[1].y + data[index].y;
// Inverse one of the values
bugs.getAt(2).x = pos[2].x - data[index].x;
bugs.getAt(2).y = pos[2].y + data[index].y;
index++;
if (index === data.length)
{
index = 0;
}
});
tween.start();
}
function destroyEmitter() {
console.log(emitter);
emitter.destroy();
tweens();
}
As you can see, I have made the particle-animation. Such steps need to be taken:
Particle-animation should be cached in the form of a set of shots (textures)
Particle-animation should be deleted. I have already done it (by means of ‘destroy‘)
Instead of the particle animation sprite animation should be realized by means of the function tweens using received textures
and passing these textures as the argument of the function tweens
Any refractoring is welcome.

In Phaser, the emitter particles are of the relatively simple DisplayObject class which do not support animations like the Phaser.Sprite does. Btw I don't know if using tweens is the best way to animate particles, because I suspect it will be heavy on CPU usage, using Sprite animations on the other hand is a bit more "light weight".
But either way, you could create a custom particle class which contains the code for your particle animation (using tweens, animations, timers, whatever) and then set that custom class as the emitter.particleClass, see a code example in link below:
http://codetuto.com/2016/02/phaser-animated-particles/

Fabric.js low FPS Animating Opacity on Multiple Objects

I just started using Fabric.js and I have a page of rectangles that I want to animate the opacity of on mouseover, the problem is that the FPS is really low when I have more than a few tiles and the animation seems to take a lot longer than the 600ms its duration is set to. With 40 tiles it's showing about 5 frames throughout the animation and a delay before starting a new tile's animation. I'm wondering if there's anyway to optimize the code to speed up the FPS and get rid of the delay.
Here's the javascript:
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var numTiles = 8;
var tileSize = windowWidth/numTiles;
var yTiles = Math.ceil(windowHeight/tileSize);
var totalTiles = numTiles*yTiles;
var canvas = new fabric.Canvas('c', { width: windowWidth, height: windowHeight });
var rect = new Array();
var row = 0;
var column = 0;
for(var n = 0; n < totalTiles; n++) {
if (n / numTiles % 1 == 0 && n != 0) {
row++;
column = 0;
}
rect[n] = new fabric.Rect({
left: column,
top: row*tileSize,
fill: 'black',
width: tileSize,
height: tileSize,
selectable: false
});
canvas.add(rect[n]);
canvas.on('mouse:over', function(e) {
e.target.animate('opacity', 0, {
onChange: canvas.renderAll.bind(canvas),
duration: 600
});
});
column += tileSize;
}

You are setting the mouse:over callback inside the for loop. This means that on mouse over, your animation is executed as many times as you passed into the for loop (for your code it is 32 times I think).
This code:
canvas.on('mouse:over', function(e) {
console.log('mouse:over');
e.target.animate('opacity', 0, {
onChange: canvas.renderAll.bind(canvas),
duration: 600
});
});
should be outside of the for loop.

Animating a glow in Raphael.js

I'm trying to achieve a pulsating glow effect in raphael.js. Here is my code http://jsfiddle.net/eaPSC/ I'm very sorry about the massive brain. ;)
I tried animating both the width of the glow effect and the opacity and neither seem to be influenced by animation at all. (The glow is static. I examined it by hiding the brain element, zooming in and checking out just the glow element, and there is simply no action.)
I tried animating a separate (non-glow) element using the same procedure and multiple attributes do get animated fine.
thanks!

You cannot animate the width or color properties of a glow. The glow is created by adding a stroke to a set of paths with zero fill. If you want to change the color or the width of the glow you have to animate the stroke or stroke-width properties.
http://jsfiddle.net/eaPSC/2/
Wrong: (quoted from your source):
anim = Raphael.animation({
width: 15,
opeacity: 1
}, 500);
Slightly More Correct:
anim = Raphael.animation({
"stroke-width": 15,
opacity: 1
}, 500);
But you will notice that this kills off the gradiented glow effect. If you actually look at the source code for glow() you can see that the final for loop creates a layered set of paths to create the gradient effect.
elproto.glow = function (glow) {
if (this.type == "text") {
return null;
}
glow = glow || {};
var s = {
width: (glow.width || 10) + (+this.attr("stroke-width") || 1),
fill: glow.fill || false,
opacity: glow.opacity || .5,
offsetx: glow.offsetx || 0,
offsety: glow.offsety || 0,
color: glow.color || "#000"
},
c = s.width / 2,
r = this.paper,
out = r.set(),
path = this.realPath || getPath[this.type](this);
path = this.matrix ? mapPath(path, this.matrix) : path;
for (var i = 1; i < c + 1; i++) {
out.push(r.path(path).attr({
stroke: s.color,
fill: s.fill ? s.color : "none",
"stroke-linejoin": "round",
"stroke-linecap": "round",
"stroke-width": +(s.width / c * i).toFixed(3),
opacity: +(s.opacity / c).toFixed(3)
}));
}
return out.insertBefore(this).translate(s.offsetx, s.offsety);
};
So if you just fix the stroke-width for all of these paths, it kills the glow effect as you will see in the example. There isn't really an easy answer to this. You could possibly animate it yourself using setInterval to remove the old glow and add a new one with a new width, but it doesn't sound like a very efficient method.

i've been able to correct this issue without the timing issue as shown in your jsfiddle demo by adding the following to resume.
elproto.resume = function (anim) {
for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {
var e = animationElements[i];
if (eve("raphael.anim.resume." + this.id, this, e.anim) !== false) {
delete e.paused;
this.status(e.anim, e.status,**e.totalOrigin**);
}
}
return this;
};