We Keep Coding

html2canvas not support transform property?

I build an image editor in javascript for my customer and we issue one huge problem. When we want to generate image where is some text rotated, canvas not generate full image with all contents over background.
Here is example:
When I click on save button I get empty background like this:
On other way, when I just add content and NOT do rotation, transform not exists in CSS, I can change color of text, change font, change background and all will look nice like on this example:
Result is perfect:
Here is my code:
function generateImage(canvas, width){
var img = new Image();
img.crossOrigin = "Anonymous";
img.width = width;
img.height = (img.width / ( 16 / 9 ));
img.src = canvas.toDataURL();
img.align = 'middle';
img.class = 'img-responsive';
img.style.width = '100%';
img.style.maxWidth = width;
document.body.appendChild(img);
}
html2canvas($this, {
onrendered: function(canvas) {
generateImage(canvas, ($this.width()+2));
},
width: $this.width()+2,
height: $this.height()+2
});
The main question is:
Is there a way to add in canvas CSS transition support to can render proper full image or some 3D canvas drawing which work properly?

Multiple Images displaying last image with dynamically created canvas and assigning to images

function innerAjax(FILE_DIR,imgJPGList){
var imgLength = imgJPGList.length;
$("#imgID").empty();// This is a div
if(imgLength!=0){
img = [];
for(i=0;i< imgLength;i++){
// dir = FILE_DIR+"/"+imgJPGList[i];
var canvasCreator = document.createElement("canvas");
canvasCreator.id = imgJPGList[i].substr(0, imgJPGList[i].indexOf('.'));
console.log("canvas id is---"+canvasCreator.id);
var canvas = $(canvasCreator).get(0);
var ctx = canvas.getContext('2d');
img[i] = new Image();
img[i].onload = function() {
console.log("inside onload function");
ctx.drawImage(img[i],0,0);
}
img[i].src = FILE_DIR+"/"+imgJPGList[i];
canvas.width = img[i].width;
canvas.height = img[i].height;
$("#imgID").append(canvas);
$("#imgID").append($("<br/>"));
}
}
$(canvas).mouseover(function myDown(e)
{
console.log("mouseover-----");
})
}
I have multiple images in a single page i am trying to create a dynamic canvas and set image height and width to it so that i could do some annotation on images. But my last image is getting displayed every time or nothing is displayed. Anyhelp is appreciated.

You are doing an asynchronous operation inside a loop which rarely work as intended.
JavaScript is single-threaded which means the code inside the onload handler won't be called before the loop finish, hence i will always be the last image.
You should also move setting canvas size to inside the handler as images not fully loaded doesn't have a width/height (it works on your system only because the images are in the browser cache).
To fix the last image problem, use this inside the handler which will represent the image loaded at that point:
img[i] = new Image();
...
img[i].onload = function() {
// at the time this gets called, the loop has finished
// these need to be here as image won't have width/height until fully loaded
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0,0); // use this (= actual image loaded)
// append canvas to DOM here etc....
}
img[i].src = FILE_DIR+"/"+imgJPGList[i];

Get Width/Height of img Loaded by JS

I need to get the Width and Height of a img tag, when it's replaced by javascript.
I tried using jQuery's width() / height() but always return the values of the cached image, and not the ones of the new image.
I need that because i have a function to scale the background-size of a div depending on size of the image loaded.
I searched a lot on google and here but can't find a solution.

To get the dimension of image try this :
var currentImage = $("img"); // get image element
var img = new Image();
img.onload = function() {
var width = this.width;
var height = this.height;
}
img.src = currentImage.attr('src');

Resize HTML canvas after loading image

See http://jsfiddle.net/jdb1991/6sxke/
I've got a canvas element that doesn't know what it's going to be used for until an image has loaded, so I need to be able to change the dimensions of the element on the fly, after creating the image object.
Something is going wrong though, as it seems to be running the commands asynchronously; writing the image to the context before the resize occurs.

use:
function objectifyImage(i) {
var img_obj = new Image();
img_obj.src = i;
return img_obj;
}
var canvas = document.getElementById('display');
var context = canvas.getContext('2d');
i = objectifyImage('https://www.google.co.uk/images/srpr/logo3w.png');
i.onload = function() {
canvas.width = i.width;
canvas.height = i.height;
context.drawImage(i, 0, 0);
};
​
demo: http://jsfiddle.net/ycjCe/1/
The element can be sized arbitrarily by CSS, but during rendering the
image is scaled to fit its layout size. (If your renderings seem
distorted, try specifying your width and height attributes explicitly
in the attributes, and not with CSS.)
source: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Basic_usage

It appears i = objectifyImage will set the image src before the image.onload handler is defined. This will cause cached images to get loaded on some browsers prior to the onload definition. Its a good idea to always define onload handlers before setting the image.src to avoid timing issues with cached images.
var self = this;
.....
this.img = document.createElement('img');
this.img.onload = function () {
self.loaded = IMGSTATE_OK;
$Debug.log('loaded image:"' + self.img.src);
}
this.img.onerror = function () {
self.loaded = IMGSTATE_ERR;
$Debug.log('error image:"' + self.img.src);
}
this.img.src = href;
..... later on check the load state

swapping images of different sizes [Javascript vs IE]

I have the following simple preloading function which substitute an image "src" attribute with another image (an animated GIF "Loading"). The problem arises only in IE: if the "loading" GIF is smaller than the actual image src, that will be resized. For example if I have a square 100px image and preload it, the image is temporarly substituted by an animated GIF of 50x50px. Whem the original image is fully loaded it is NOT displayed at its size, but at the smaller 50px. Here is the code, if you need it
_preload = function(url, placeholderUrl) {
var img = new Image();
loading = true;
var placeholder = new Element("img", {
src: placeholderUrl
});
img.placeholder = placeholder;
img.onload = function(evt) {
this.placeholder.src = this.src;
loading = false;
}
img.src = url;
return placeholder;
}
Here you can see the visual error

You should be able to adjust the width/height of the image within the callback function:
img.onload = function(evt) {
this.placeholder.src = this.src;
this.placeholder.width = this.width;
this.placeholder.height = this.height;
loading = false;
}
Example: Resizing image onLoad

I guess replacing placeholder with img (the img-elements inside the dom), instead of simply changing the src-attribute of placeholder, should fix this issue.