I want to set a fill to my rectangle in Fabric.js like this:
myRect.fill = new fabric.Pattern({
source: myImg //myImg was loaded previously in another
//fabric.util.loadImage block
});
My image is being loaded correctly before this code block is run. I've looked up the demos for patterns at Fabric.js website. There the pattern is set within a fabric.util.loadImage block.
So the following code works fine for me:
fabric.util.loadImage('myImg.png', function(img) {
myRect.fill = new fabric.Pattern({
source: img
});
});
I want to understand why I can't set the source afterwards without using fabric.util.loadImage. Is there an option with setting the fill using an already loaded image?
Related
I have a placeholder background image that i want to replace after its loaded.
$.get("BIG-IMAGE-URL").done(function(data){
$('.MY-DIV-CLASS').css('background-image', 'url("BIG-IMAGE-URL")');
});
Does anyone know how to make a simple function like this?
You can load your big image with javascript, and set the CSS background in the load event handler.
var img = new Image(); // Create new img element
img.addEventListener('load', function() {
// set background here
$('.MY-DIV-CLASS').css('background-image', 'url("bigImage.png")');
}, false);
img.src = 'bigImage.png'; // Set source path
Source: MDN Using_images
Additionally, here is a similar solution using jQuery How can I check if a background image is loaded?
I am writing an extension using the Pale Moon Addon SDK which is basically the exact same as Firefox's Addon SDK. I am trying to write an extension which notifies users when they have new messages on the social network deviantArt, but I'm running into a problem. I want the icon of the extension to change to show the number of messages the user has, so I created an empty document like this:
var {window: {document}} = require('sdk/addon/window');
Then I take that document and add to it an HTML5 canvas like so:
var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
So far so good, but the problem comes in when I try and add an image to that canvas. It says that Image is not defined.
if (is_core) {
img = new Image();
img.onload = function() {
image = ctx.drawImage(img, 6, 30, 32, 32);
}
img.src = self.data.url("h_core-status.png");
The problem, of course, is that I havn't loaded any module containing the Image object I need to create in order to add it to the canvas. However, I need that canvas to dynamically generate the icon for the extension. I considered adding a hidden iframe to the document and editing the canvas there, but it seems like a dirty solution.
Is there any Firefox Addon SDK module which contains an object like Image I can use, is there a better method to do what I'm trying to accomplish or am I going about this all wrong?
I solved this problem myself by realizing that JavaScript's new Image() just creates an img tag that we then set the src to and when it loads, using that img tag in the canvas. So by doing this explicitly rather than using new Image() we can avoid problems with the Image object not being defined.
Just replace:
img = new Image();
with
img = document.createElementNS("http://www.w3.org/1999/xhtml", "img");
document.documentElement.appendChild(img);
Leave the rest of the code alone, it'll work.
I'm using html2canvas library to generate images from a specific div with informations inserted by users
$('#generate').on('click', function(event){
event.preventDefault();
var x=document.getElementById("signature");
html2canvas(x).then(function(canvas) {
var data = canvas.toDataURL();
$('#image').fadeIn(200).attr('src', data);
});
});
On Windows Chrome, the generated canvas look fine. But on Firefox, the logo image and html text inside canvas look so blurred.
UPDATE
If I change var x by document.body, the canvas look better. But I need just the specific div.
Chained methods can be messy when one of them is asychronous. Try this:
html2canvas(x).then(function(canvas) {
var data = canvas.toDataURL();
$('#image').attr('src', data);
$('#image').fadeIn(200);
});
Have also experienced this problem: solved by disabling the image smoothing (see also disabling imageSmoothingEnabled by default on multiple canvases)
I am using jquery guillotine to crop image and save to the server but unfortunately when i want to do things dynamically it doesn't work as it should be . I have created thumbnails on the same picture and when you click on a thumbnail it should let you edit that picture and crop etc. I have 3 scripts on the page , 1 ) guillotine , 2) scripts that when you click on thumbnails swaps the small image with the big one , 3) and when you click on crop button gets the values and does the job in php.
after i swap the image , i call/run the guillotine but it seems like it is caching the first images dimensions. i have created a fiddle.
i dont know how to put link to jsfiddle here but it is jsfiddle / 0 unub 77 f
I'm a bit late but as said above it might help others with the same problem.
Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is made relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviors.
So, if you have Guillotine working on an image and you want to swap that image, you should remove the existing instance of the plugin and create a new one over the new image so it can properly render such new image.
var pictures = $('.picture'),
gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' // 1x1 gif
// Guillotine loader
pictures.on('load', function() {
var img = $(this)
// Remove any existing instance
if (img.guillotine('instance')) img.guillotine('remove')
// Create new instance
img.guillotine({width: 400, height: 300})
// Bind buttons, only the first time!
if (! img.data('bindedBtns')) {
img.data('bindedBtns', true)
$('#rotate_left').click(function(){ img.guillotine('rotateLeft') })
$('#rotate_right').click(function(){ img.guillotine('rotateRight') })
// ...
}
})
// Swap images as needed.
// Each time you change a 'src' attribute the function above should run.
picture.on('click', function() { /* Swap thumbnail */ })
// Make sure that the 'onload' event is triggered at least once on each picture.
pictures.each(function() {
// Save the original src, replace it with the 1x1 gif and reload the original src.
if (this.complete !== false) { var src = this.src; this.src = gif; this.src = src }
}
The 'onload' handler serves two purposes, it loads guillotine the first time for each picture and reloads it everytime a picture is swapped.
Two important points to consider:
Actions (rotate, zoom, etc.) should be binded only once to avoid problems like #5.
You have to make sure that the script runs before each image finishes loading, or otherwise you won't have the plugin before swapping images (the last part of the script handles this).
Hope it helps.
ok i figured out , when i set the img src in the second script i had to destroy everything and than call the script again.
right here is my solution to my question
you load the first image as in the demo page , and than put your javascript that does the swap image, basically change the source of the image, destroy it and than call the function again
var swap_img = $(this).find('img').attr('src'); //get the src of the image of the thumbnail
$("#sample_picture").attr('src',swap_img); //set it , swap it
picture.guillotine('remove'); //remove the current instance
guillotine_function(); //and call it again.
and everything should work as it should be
this code work without deleting the guillotine instance, img being the image element :
guillotine._unwrap();
guillotine.zoomInFactor = 1 + guillotine.op.zoomStep;
guillotine.zoomOutFactor = 1 / guillotine.zoomInFactor;
guillotine.glltRatio = guillotine.op.height / guillotine.op.width;
guillotine.width = guillotine.height = guillotine.left = guillotine.top = guillotine.angle = 0;
guillotine.data = {
scale: 1,
angle: 0,
x: 0,
y: 0,
w: guillotine.op.width,
h: guillotine.op.height
};
guillotine._wrap(img);
guillotine.fit();
I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?
Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired