We Keep Coding

Canvas to PDF, HTML, Konva.js

I am working about draggable objects on Konva stage. I want to the canvas object layer turn to PDF. I use toDataURL. Like this;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
id: 'stage',
});
var grid_layer = new Konva.Layer();
var object_layer = new Konva.Layer();
stage.add(grid_layer);
stage.add(object_layer);
function updateScreen() {
object_layer.batchDraw()
}
function downloadURI(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
document.getElementById('save').addEventListener(
'click',
function() {
var dataURL = stage.toDataURL({ pixelRatio: 3 });
downloadURI(dataURL, 'stage.png');
},
false
);
Save button work without objects and save canvas image. But when i run the code with objects on stage, the page reloads and the button doesn't work. doesn't save canvas image

I would strongly recommend to doing it like shown in the Konva Wiki.
// Code form KonvaJS wiki
var pdf = new jsPDF('l', 'px', [stage.width(), stage.height()]);
pdf.setTextColor('#000000');
// first add texts
stage.find('Text').forEach((text) => {
const size = text.fontSize() / 0.75; // convert pixels to points
pdf.setFontSize(size);
pdf.text(text.text(), text.x(), text.y(), {
baseline: 'top',
angle: -text.getAbsoluteRotation(),
});
});
// then put image on top of texts (so texts are not visible)
pdf.addImage(
stage.toDataURL({ pixelRatio: 2 }),
0,
0,
stage.width(),
stage.height()
);
pdf.save('canvas.pdf');
This should add all text and other objects to a pdf.

From the comments, I can conclude that you don't host the images using the server you use for the konva stuff. You can't access the images from your website as they are not from the same origin. This helps secure the files on your computer from the access of websites like yours. So you would have to move the images to the server and access them from there.

issue with image object in fabric.js

I am complete newbie in fabric.js. I need to load several images from URL in canvas and add them as image object so I can set their z index.
I tried using Image.fromURL but it did not return object so I can't set their z index. New fabric.Image take images from page so I am not getting results from it.
This is what I have done so far
var canvas = new fabric.Canvas('myCanvas');
var front_wall = fabric.Image.fromURL('img/bedroom1-front/front_wall.png',
function(img) {
img.scale(0.65);
canvas.add(img);
}
);
I add five more images same way.
Can fabric.Image.fromURL return the image object (by using any attribute) ?
So I can change their z-index after loading.
Sorry I don't have jsfiddle to show.

Welcome to Stack Overflow,
Please check this fiddle
I added some comments in that fiddle. Code is below:
var srcImg = "http://fabricjs.com/lib/pug.jpg";
var canvas = new fabric.Canvas('c');
var icon = null;
var image = fabric.Image.fromURL(srcImg, function(oImg) {
oImg.set({width: oImg.width / 3,
height: oImg.height / 3,
left: 100,
top: 100,
originX: 'center',
originY: 'center',
selectable: false,
transparentCorners: false});
//magic strats here to make active Image and you can control image object here
canvas.setActiveObject(oImg);
icon = canvas.getActiveObject();
icon.hasBorders = false;
icon.hasControls = false;
canvas.add(oImg);
});
//if you want to control outside somewhere you can do this:
setTimeout(function(){
icon.set({'top': 200, 'left': 200});
canvas.renderAll();
}, 1500);

Implementing ClipTo function on fabricjs canvas

I am able to clip my canvas to a shape if I hardcode the SVG when the canvas initially loads. Now I am trying to do this with a click function. The challenge is that since everything has loaded, when I click on it and load the clipping function, it clears my canvas and leaves just the shape and background. I'm looking for ideas on how to implement this. I only know how to load the opts in a new fabric.canvas function. I suspect I will have to get the current canvas data and then apply the opts parameter to it, but I am not sure the best way to do it. Here is my code:
var canvas = new fabric.Canvas('imageCanvas');
$('#shape').on('click', function(){
var clipPath = new fabric.Path("M161.469,0.007 C161.469,0.007 214.694,96.481 214.694,96.481 C214.694,96.481 322.948,117.266 322.948,117.266 C322.948,117.266 247.591,197.675 247.591,197.675 C247.591,197.675 261.269,306.993 261.269,306.993 C261.269,306.993 161.469,260.209 161.469,260.209 C161.469,260.209 61.667,306.993 61.667,306.993 C61.667,306.993 75.346,197.675 75.346,197.675 C75.346,197.675 -0.010,117.266 -0.010,117.266 C-0.010,117.266 108.242,96.481 108.242,96.481 C108.242,96.481 161.469,0.007 161.469,0.007", ),
opts = {
controlsAboveOverlay: true,
backgroundColor: 'rgb(255,255,255)',
clipTo: function (ctx) {
if (typeof backgroundColor !== 'undefined') {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, 900, 900);
}
clipPath.render(ctx);
}
}
//obviously this is not going to work
var reloadShape = JSON.stringify(canvas);
canvas.loadFromJSON(reloadShape);
new fabric.Canvas('imageCanvas', opts);
});

You should initialize canvas just once in your application, otherwise you will loose content of it.
Later when you choose your clipping path create and assign your clipTo function.
if not needed any other processing you could also do just
canvas.clipTo = clipPath._render;
without creating the new function.
//do this once on your application:
var opts = {
controlsAboveOverlay: true,
backgroundColor: 'rgb(255,255,255)',
},
canvas = new fabric.Canvas('imageCanvas', opts);
$('#shape').on('click', function(){
var clipPath = new fabric.Path("M161.469,0.007 C161.469,0.007 214.694,96.481 214.694,96.481 C214.694,96.481 322.948,117.266 322.948,117.266 C322.948,117.266 247.591,197.675 247.591,197.675 C247.591,197.675 261.269,306.993 261.269,306.993 C261.269,306.993 161.469,260.209 161.469,260.209 C161.469,260.209 61.667,306.993 61.667,306.993 C61.667,306.993 75.346,197.675 75.346,197.675 C75.346,197.675 -0.010,117.266 -0.010,117.266 C-0.010,117.266 108.242,96.481 108.242,96.481 C108.242,96.481 161.469,0.007 161.469,0.007", );
canvas.clipTo = function (ctx) {
if (typeof backgroundColor !== 'undefined') {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, 900, 900);
//for clipping _render would be enough.
// but .render() will allow you to position the path where you want with top and left
clipPath.render(ctx);
}
// display new canvas clipped.
canvas.renderAll();
});

The background image doesnt appear everytime using Fabric.js

Hi I am using the background image in my example. It appears once if I am reloading the page but doesn't appear if I am running the program again.
I have tried setting the image using setBackgroundImage and then render it. It appears first after refreshing the page but doesn't work afterwards.
The fiddle is here — http://jsfiddle.net/wv9MU/6/
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png',function() {
canvas.renderAll();
});
canvas.setHeight(400);
canvas.setWidth(1300);
canvas.renderAll();
// create a rectangle object
document.getElementById('1').addEventListener('click', function (e) {
// create a rectangle1 object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'aqua',
width: 200,
height: 200
});
// "add" rectangle1 onto canvas
canvas.add(rect);
rect.lockRotation=true;
canvas.renderAll();
});
canvas.setBackgroundImage('C:\Users\131321\Desktop\abc.jpg', canvas.renderAll.bind(canvas));
document.getElementById('2').addEventListener('click', function (e) {
// create a rectangle2 object
var rect = new fabric.Rect({
left: 150,
top: 150,
fill: 'green',
width: 50,
height: 50
});
// "add" rectangle2 onto canvas
canvas.add(rect);
rect.lockRotation=true;
canvas.renderAll();
});

It looks like it's because you're loading a local file, and only when you hit run:
Not allowed to load local resource: file:///C:/UsersY321Desktopabc.jpg (index):1
Error loading file:///C:/UsersY321Desktopabc.jpg
If I change line 36 to
canvas.setBackgroundImage('http://www.placehold.it/250x250', canvas.renderAll.bind(canvas));
It works every time. http://jsfiddle.net/wv9MU/7/
Try adding UsersY321Desktopabc.jpg to your website folders and link it from there.

Add image from user computer to canvas

i'm working on a web app that allow users to create dynamic slideshow. Currently i've got an issue regardless how to add image from the computer's user to the canvas.
I'm using a input button to get the file from the computer and it appeal a function who will add the image to the canvas.
So far i've tried different ways to add the image to the canvas as well as this one : Dynamically add image to canvas
But the code showing here doesnt work in my case, because it just draw the image into the canvas but it wont allow it to be draggable and resizable just like the Kitchensink.js demo from Fabricsjs.
I've also try to convert the image into Base64 and use the LoadJSON to convert it back but i encountered this error :
Uncaught TypeError: Cannot read property 'length' of undefined fabric.js:2089
enlivenObjects fabric.js:2089
fabric.util.object.extend._enlivenObjects fabric.js:9025
fabric.util.object.extend.loadFromJSON fabric.js:8953
sub
Sub's refering to the function i've called to add the image.
I've also try this code :
document.getElementById('imgLoader').onchange = function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new fabric.Image();
img.onload = function(){
img.set({
left : 250,
top : 250,
angle : 20,
padding: 10,
cornersize: 10
});
image.scale(getRandomNum(0.1, 0.25)).setCoords();
canvas.add(image);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
Which catch these errors :
Uncaught TypeError: Cannot read property 'width' of undefined fabric.js:14358
fabric.Image.fabric.util.createClass._setWidthHeight fabric.js:14358
fabric.Image.fabric.util.createClass._initConfig fabric.js:14334
fabric.Image.fabric.util.createClass.setElement fabric.js:14127
fabric.Image.fabric.util.createClass._initElement fabric.js:14322
fabric.Image.fabric.util.createClass.initialize fabric.js:14097
(anonymous function) fabric.js:2679
klass fabric.js:2728
reader.onload diapo.js:746
I've cleary run out of ideas and only achieved to draw the image but not adding it to the canvas.
All in one i'd like to add an image to my Fabricjs canvas with the same attributes regardless the draggable as the Kitchensink demo.
Thanks in advance for your help :)

There is one basic mistake in your code, you are trying to add the image data to the src attribute of the fabric.Image object.
What you need to do, is to create an Image object with your result, and pass it to the fabric.Image object, like this:
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
}
I made a working example here:
http://jsfiddle.net/jaibuu/Vp6wa/

Upload image in canvas from computer by Fabric js.
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>