If u look at this Fiddle
When i click #uploadImage button it adds the images randomly to the #html2canvas div.
Now what i want is to select a specific object after adding many and then click the #grayscale
button to change the object only with the selected area to turn grayscale . is this possible using fabric.js or i have to change loyality ?
HTML
<div id="html2canvas">
<canvas id="c"></canvas>
</div>
<img src="http://i.imgur.com/tEpBeQV.jpg" height="50" width="50" id="my-img">
<button class="deepblue-button" id="uploadImage">Upload</button>
<button id="grayscale">GrayScale</button>
JavaFabric SCRIPT
var canvas = new fabric.Canvas('c');
canvas.setWidth(640);
canvas.setHeight(480);
var img = document.getElementById("my-img");
var upload = document.getElementById("uploadImage");
upload.addEventListener('click',uploadI,false);
function uploadI() {
canvas.add(new fabric.Image(img, {
left: Math.floor(Math.random() * 400) + 100,
top: Math.floor(Math.random() * 250) + 200,
width: 100,
height: 100
}));
}
UPDATE
This Fiddle ("Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." presumably because of JSfiddle) did the trick but if i am selecting multiple objects and then changing the grayscale it wont work . This only applies for one and only one object selected but not multiple . Therefore anyone with a better answer ?
Sorry I misunderstood your question. My previous fiddle indeed only changes the color of one object (the selected, active object).
If you want to have all objects grayscaled at the same time, you could push them into an array, then loop over that array to change their properties, and finally, render all of them.
var allImages = [],
greyscale = document.getElementById('grayscale');
greyscale.addEventListener('click', function() {
var filter = new fabric.Image.filters.Grayscale();
// loop over all indexes in allImages array
for ( var i = 0; i < allImages.length; i++ ) {
allImages[i].filters.push(filter);
allImages[i].applyFilters(canvas.renderAll.bind(canvas));
// NB: don't know if this can be done out of the loop?
}
}, false);
function uploadI() {
var obj = new fabric.Image(img, {
left: Math.floor(Math.random() * 400) + 100,
top: Math.floor(Math.random() * 250) + 200,
width: 100,
height: 100
});
// now last image added to array is at index allImages[allImages.length-1]
allImages.push(obj);
// now add it to the canvas
canvas.add(allImages[allImages.length-1]);
}
NB / Disclaimer: I am not an expert in fabric.js, and although this may work, there may be better methods of doing this, eg see fabric.Collection, however documentation is hard to find so I hope this helps.
NB: Again wasn't able to test if it works because of the jsfiddle restrictions
Related
I'm working on a client's web design and development powered by Wordpress and Woocommerce, the plugin is great but there's a few functions I wish it had. The main one is giving the ability for the user to save the preview of their configuration.
The plug-in is 'Woocommerce Visual Products Configurator':
It allows buyers to build their own item by selecting from a series of different attributes for different parts of an item. Ex, choosing different types of Soles for a shoe, as well as being able to choose from a series of laces for the same shoe.
My Issue: The configuration images are layered on top of each other as the user selects their options so any normal "save as" function will just save the top image.
I have succesfully managed to combine and save the images using html2canvas-Data URL() but the way it generates the screenshots means the quality becomes very poor.
My thoughts are to merge all the images within the "vpc-preview" DIV then force the download.
Hunting through the functions of the plugin I found this:
function merge_pictures($images, $path = false, $url = false) {
$tmp_dir = uniqid();
$upload_dir = wp_upload_dir();
$generation_path = $upload_dir["basedir"] . "/VPC";
$generation_url = $upload_dir["baseurl"] . "/VPC";
if (wp_mkdir_p($generation_path)) {
$output_file_path = $generation_path . "/$tmp_dir.png";
$output_file_url = $generation_url . "/$tmp_dir.png";
foreach ($images as $imgs) {
list($width, $height) = getimagesize($imgs);
$img = imagecreatefrompng($imgs);
imagealphablending($img, true);
imagesavealpha($img, true);
if (isset($output_img)) {
imagecopy($output_img, $img, 0, 0, 0, 0, 1000, 500);
} else {
$output_img = $img;
imagealphablending($output_img, true);
imagesavealpha($output_img, true);
imagecopymerge($output_img, $img, 10, 12, 0, 0, 0, 0, 100);
}
}
imagepng($output_img, $output_file_path);
imagedestroy($output_img);
if ($path)
return $output_file_path;
if ($url)
return $output_file_url;
} else
return false;
}
However the function isn't called anywhere. There's also a couple of "save" buttons that are commented out which makes me wonder if they removed from a previous build.
Ideally I'd like the user to be able to instantly share their creation to facebook but thought this would be a good start.
Any ideas would be greatly appreciated!
Thanks!
UPDATE:
I've managed to use the following code to output an alert of the url's of each of the config images. Useless for the user but at least I know it's targeting exactly what I need.
function img_find() {
var imgs = document.querySelectorAll('#vpc-preview img');
var imgSrcs = [];
for (var i = 0; i < imgs.length; i++) {
imgSrcs.push(imgs[i].src);
}
return alert(imgSrcs);
}
Any suggestions on how to manipulate this and merge the corresponding image of each URL then force the download?
Cick to see Fiddle
UPDATE 2: The following fiddle lets users upload images and then merges them into a single photo for download. Unfortunately my coding skills aren't good enough to manipulate this into using the SRC urls of images within certain DIV and to Merge all the photos on top of each other.
Fiddle
function addToCanvas(img) {
// resize canvas to fit the image
// height should be the max width of the images added, since we rotate -90 degree
// width is just a sum of all images' height
canvas.height = max(lastHeight, img.width);
canvas.width = lastWidth + img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (lastImage) {
ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
}
ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
ctx.drawImage(img, -canvas.height, lastWidth);
lastImage = new Image();
lastImage.src = canvas.toDataURL();
lastWidth += img.height;
lastHeight = canvas.height;
imagesLoaded += 1;
}
Based on this question/answer, I would take a look at node-canvas.
What I have done in the past is use a #print css file to only capture the divs needed. Very simple concept but works well.
After looking at your link, that is exactly the situations I use it in..online designers. It is a little more difficult keeping your layers responsively aligned, but in the end I feel your codes become cleaner and it works well across devices and OS'.
If you dont want PDF and a simple preview and download than html2image.js is perfect.
$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
padding-left: 25px; padding-top: 10px;">
Place any code here
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage">
</div>
For High quality you want to use rasterizeHTML.js
Found here:
https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html
I'm attempting to add a loaded image into a fabric Group object. Everything looks ok, but the selection controls aren't selectable and I can't drag the object around. The top left control works though and after clicking it everything is fine.
Here is a jsfiddle that demonstrates the behavior.
var canvas = new fabric.Canvas('canvas', {
width: 200,
height: 200
});
var group = new fabric.Group();
canvas.add(group);
fabric.Image.fromURL('https://placehold.it/100x100', function(img) {
group.addWithUpdate(img);
canvas.setActiveObject(group);
canvas.renderAll();
});
Is this a bug or am I doing something wrong?
For some performance reason, fabricjs does not call setCoords automatically after adding objects to a group ( in case of many object added you can call setCoords just once ).
So after doing addWithUpdate, just call group.setCoords();
var canvas = new fabric.Canvas('canvas', {
width: 200,
height: 200
});
var group = new fabric.Group();
canvas.add(group);
fabric.Image.fromURL('https://placehold.it/100x100', function(img) {
group.addWithUpdate(img);
group.setCoords();
canvas.setActiveObject(group);
canvas.renderAll();
});
I came across this post because I was having trouble getting the positioning of images to work properly. I ended up finding that it's easier to just create create an image element using document.createElement and set the src, then feed that into fabric.Image with all the options you need (instead of using fabric.Image.fromURL which was too much of a headache to use), before adding it to the group.
var oImg = document.createElement("img");
oImg.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/512px-Cog_font_awesome.svg.png');
var i = new fabric.Image(oImg, {
originX: 'center',
originY: 'center',
left: left+35,
top: top-30,
scaleX:.05,
scaleY:.05,
});
g = new fabric.Group([r, t, i]); // where r and t are other fabric objects
Logo and elements from ul once clicked rotates image. By default image is already rotated by certain degrees, then on each click image rotates to necessary value.
So far I was using the following:
$("#objRotates").css('opacity','.2');
var value = 0;
var prev_value = 0;
$( "li" ).click(function() {
var text=$(this).text();
if(text==="text1"){value=0;}
if(text==="text2"){value=33;}
if(text==="text3"){value=66;}
if(prev_value != value){
$("#objRotates").animate({opacity:'1'});
$("#objRotates").rotate({
animateTo:value,
easing: $.easing.easeInOutExpo,
center: ["25px", "150px"],
callback: function(){$("#objRotates").animate({opacity:'0.2'});}
});
}
prev_value = value;
});
Above code is the one that was used before, where images start position was 0 and its animation was triggered from link text.
Using jqueryRotate.js examples(here)
How do I change the code, so that images start position is certain degrees and animation starts if element with specific ID is clicked?
Give at least clue..Cause for now, looking at my old code, I am lost. Thanks in advance.
SIMPLIFIED FIDDLE
Ok, so I've created a couple of samples for you to check out. The first one is very basic and I've simplified the code a little to make it easier to understand. This one just uses completely static values and a static elementId for the event, which I'm pretty sure answers your question based on your response to my comment yesterday. http://jsfiddle.net/x9ja7/594/
$("#elementId").click(function () {
var startingAngle = 45;
var endingAngle = 90;
var elementToRotate = "img";
$(elementToRotate).rotate({
angle: startingAngle,
animateTo: endingAngle
});
});
But I wanted to give another example as well that would be dynamic and repeatable for multiple elements. With the code above, you would have to copy/paste the same code over and over again if you want to perform this animation by clicking different elements. Here's an alternative. In this example, you set all of your parameters in the data attributes in the clickable element, then the function is completely repeatable, you only have to write it once. Less code = everyone happy! Here's the example: http://jsfiddle.net/x9ja7/595/
//#region Default starting angles
$("#image1").rotate({ angle: 90 });
$("#image2").rotate({ angle: 20 });
//#endregion
$(".rotateAction").click(function () {
//#region Optional parameter - used in the optional callback function
var $self = $(this);
//#endregion
var startingAngle = Number($(this).attr("data-startingangle"));
var endingAngle = Number($(this).attr("data-endingangle"));
var elementToRotate = $(this).attr("data-elementtorotate");
//#region If the current angle is the ending angle, reverse the animation - this can be removed if you want, I thought it may be cool to show some of the things you can do with this.
var currentAngle = $(elementToRotate).getRotateAngle();
if ( currentAngle[0] === endingAngle) {
startingAngle = Number($(this).attr("data-endingangle"));
endingAngle = Number($(this).attr("data-startingangle"));
}
//#endregion
$(elementToRotate).rotate({
angle: startingAngle,
animateTo: endingAngle
//#region This is optional - uncommenting this code would make the animation single-use only
//, callback: function () { $self.off().removeClass("clickable"); }
//#endregion
});
});
Hope this helps. If you need any other assistance, please let me know.
I have an HTML5 canvas that is displaying a number of images and four description boxes. It is currently possible to drag and drop the images around the canvas, but I want to add functionality to remove an image when it is dragged to its correct description box.
I've tried writing the following function, but it does not currently seem to be doing anything... i.e. if I drag an image to its description box and drop it, it still remains on the canvas:
function initStage(images){
var stage = new Kinetic.Stage({
container: "container",
width: 1000,
height: 500
});
var descriptionLayer = new Kinetic.Layer();
//var imagesLayer = new Kinetic.Layer();
var allImages = [];
var currentScore = 0;
var descriptionBoxes = {
assetsDescriptionBox: {
x: 70,
y: 400
},
liabilitiesDescriptionBox: {
x: 300,
y: 400
},
incomeDescriptionBox: {
x: 530,
y: 400
},
expenditureDescriptionBox: {
x: 760,
y: 400
},
};
/*Code to detect whether image has been dragged to correct description box */
for (var key in sources){
/*Anonymous function to induce scope */
(function(){
var privateKey = key;
var imageSource = sources[key];
/*Check if image has been dragged to the correct box, and add it to that box's
array and remove from canvas if it has */
canvasImage.on("dragend", function(){
var descriptionBox = descriptionBoxes[privateKey];
if(!canvasImage.inRightPlace && isNearDescriptionBox(itemImage, descriptionBox)){
context.remove(canvasImage);
/*Will need to add a line in here to add the image to the box's array */
}
})
})();
}
}
The code I've written is based on the tutorial that I found at: http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/
Can anyone spot what I'm doing wrong, and how I can ensure that the image is removed from the canvas when it's dragged to its corresponding description box?
That example bugged me because it seemed old, so I edited it a little...
http://jsfiddle.net/LTq9C/1/
...keep in mind that I cant be positive that all my edits are the best way to do things, Im new and all ;)
And here I've edited it again for you to show the image being removed...
animal.on("dragend", function() {
var outline = outlines[privKey + "_black"];
if (!animal.inRightPlace && isNearOutline(animal, outline)) {
animal.remove();
animalLayer.draw();
}
});
http://jsfiddle.net/8S3Qq/1/
I've been messing around with Raphael.js recently and I've run into a problem regarding the position of each Raphael object.
I want to create an arbitrary amount of 'canvases' but have them arranged within a div, already positioned on the page. I've been trying to figure out a way to get them to behave something like a block element, but haven't come up with an answer. Each new raphael object is placed outside of any div.
Here's the html:
...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
<div id="content"></div>
...
and the javascript:
var previews = [];
var prevSize = 25;
var spacing = 10;
//get container
var container = document.getElementById('content');
//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));
var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;
for(var y=0; y<rowsPerPage-1; y++){
for(var x=0; x<prevsPerRow; x++){
var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
previews.push(preview);
}
}
for(var x=0; x<previews.length-1; x++){
var temp = previews[x];
var rectangle =temp.rect(0,0,prevSize,prevSize);
rectangle.attr('fill','black');
}
One solution I was considering was simply adding the offset of the desired div to the x and y coords of the object, but this doesn't seem like the best solution.
Thanks for the help!
edit: Here is a jsfiddle to help elucidate exactly what I'm getting at.
http://jsfiddle.net/xpNBr/
Well, this is two years too late but I'm not seeing an answer here. So for posterity and future seekers: I'd use the element or element Id factory methods supplied by raphael as described here.
From that page:
// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
You could use a different container for every newly created canvas.
Here is a working example, using the addCanvas function to create every new element:
http://jsfiddle.net/creaweb/KtNPS/5/
Note that the spacing between canvas blocks is defined in CSS, as well as their size.