I want to save my canvas image on another image.
$(document).on('click','#local-save', function(event) {
var imgURL = "assets/images/bg.png";
canvas.overlayImage.filters = [];
canvas.overlayImage.applyFilters();
canvas.renderAll();
window.open(canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 500,
width: 500
}));
});
In here I can get canvas image. But I want to save it on background image. How to do this?
use your data url as the background property for something..
var dataurl = canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 500,
width: 500
});
someElement.style.background = "url("+dataurl+")";
Run the snippet and click on click me then canvas converted into image. I thing this is helpful for you
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg',
canvas.renderAll.bind(canvas),
// here set the crossOrigin attribute
{crossOrigin: 'anonymous'}
);
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 70,
top: 100,
width: 250,
height: 200,
angle: 0
}).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
<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>
<div class="col-sm-12">
<div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"><strong>Customize T-Shirt From Here</strong>
</div>
<input type="file" id="file">
<br/>
<canvas id="canvas" width="750" height="550" style="border: 1px solid black; box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>
Click Me!!
<br />
<img id="preview" />
</div>
I have solved my problem as follows. My background image open under another canvas id MyID. My normal canvas id is canvas .
var MaskImg = canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 400,
width: 400
});
var c=document.getElementById("MyID");
var ctx=c.getContext("2d");
c.width = 1748;
c.height = 2481;
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "assets/images/bg.png"
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 1748, 2480);
imageObj2.src = MaskImg;
imageObj2.onload = function() {
event.preventDefault();
ctx.drawImage(imageObj2, (100, 100 , 400, 400);
event.preventDefault();
var img = c.toDataURL({
format: 'png',
});
window.open(img);
}
};
Related
I'm using fabric.js to manipulate images added to my canvas. I have a shadow but I'd like it to be even around the image. What I have now is below, but here's what I'm trying to replicate with the images added. What am I doing wrong that's causing the shadow to not display?
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) {
//create shadow
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 0,
offsetY: 0,
opacity: 0.6,
fillShadow: true,
strokeShadow: true
}
var oImg = img.set({
left: 0,
top: 0,
angle: 0,
stroke: '#222',
strokeWidth: 40
}).scale(0.2);
oImg.setShadow(shadow); //set shadow
canvas.add(oImg).renderAll();
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
oImg.setShadow(shadow);
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 />
<br>
<canvas id="canvas" width="200" height="200"></canvas>
If uploaded image is a png, it will show effect to the borders, for others it will effect to border, you can use affectStroke which will affect to stroke as well. Here is the doc.
DEMO
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) {
//create shadow
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 20,
offsetY: 20,
affectStroke: true
}
var oImg = img.set({
left: 0,
top: 0,
stroke: 'black',
strokeWidth: 10
}).scale(0.2);
oImg.setShadow(shadow); //set shadow
canvas.add(oImg).renderAll();
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
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 />
<br>
<canvas id="canvas" width="400" height="400"></canvas>
Your shadow is actually displayed, its right behind the object.
If you change offsetX or offsetY you will see it.
Like here
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 50,
offsetY: 50,
opacity: 0.6,
fillShadow: true,
strokeShadow: true
}
http://jsfiddle.net/5KKQ2/2565/
There is also an issue https://github.com/kangax/fabric.js/issues/1214 about shadow size but it's not completed yet.
Hope it helps.
I'm playing a lot with fabric.js. I read here how to add my own images. How would I do this but give each uploaded photo a certain style? In other words, I'd like each picture uploaded to have a border or stroke to look like this:
.
The code I'm playing with:
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>
You would have to set stroke and strokeWidth property for the image object to accomplish that ...
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: 40,
top: 40,
angle: 00,
width: 100,
height: 100,
stroke: '#07C', //<-- set this
strokeWidth: 5 //<-- set this
}).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="180" height="180"></canvas>
We are using stackoverflow links code to upload image in a site
once we upload, its occupying only little part in box as here.
But image should occupy full box.
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>
Replace the line
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
with
var oImg = img.set({left: 0, top: 0, angle: 00, width: canvas.getWidth(), height: canvas.getHeight()});
This is what was restricting your image size. Also, I don't know why you have the scale there - but if you keep it as .scale(0.9), it won't fill the whole box. Instead it will fill only 90% of its width and height.
Snippet
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:canvas.getWidth(), height:canvas.getHeight()});
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>
Run code snippet
I am using HTML5 and fabric.js for uploading multiple images. I want to add custom text on this image canvas. Right now I am uploading multiple images into canvas one by one. After uploading images I want to add custom text on canvas.
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
Click Me!!<br />
<img id="preview" />
https://jsfiddle.net/varunPes/vb1weL93/
I have seen some links:
http://fancyproductdesigner.com/product/t-shirt/ - The expected result.
http://jsfiddle.net/EffEPi/qpJTz/
Update
I need that the user can choose the text's color and the font-family.
After clicking on Click Me!! button, the custom text and image should come together in one image.
You can use IText like this:
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100,
}));
And the full code:
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
$('#fill').change(function(){
var obj = canvas.getActiveObject();
if(obj){
// old api
// obj.setFill($(this).val());
obj.set("fill", this.value);
}
canvas.renderAll();
});
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
// old api
// obj.setFontFamily($(this).val());
obj.set("fontFamily", this.value);
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
oText.bringToFront();
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
}
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<input type="file" id="file">
<input type="color" value="blue" id="fill" />
<select id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550"></canvas>
Click Me!!
<br />
<img id="preview" />
Update:
To keep the text always in the front you need to use .bringToFront() function. (Thanks to #Amit Sharma in Fabric.js - problem with drawing multiple images zindex)
http://jsbin.com/qicesa/edit?html,css,js,output
I am using Html5, fabric.js and Java script. I am uploading multiple images in canvas, But sometimes uploaded image larger than canvas. I want image set in fix size.
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: 50, top: 100, angle: 00}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
console.log("aaaaaaaaaaa" + dataURL);
// console.log("Canvas Image " + dataURL);
// document.getElementById('txt').href = dataURL;
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
}
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
Click Me!!
<br />
<img id="preview" />
Before upload:
After upload:
I want every image to fix size. After uploading image, user can change the size, angle and other property.
add height and width of specific size in your code as below.
var oImg = img.set({width: 150, height: 150, left: 50, top: 100, angle: 00}).scale(0.9);
If I understand the problem correctly, you can resize the image to the size you want by passing those parameters (width and height) to the function img.set.
img.set({... width:100, height:100});
The full code:
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: 50, top: 100, 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});
console.log("aaaaaaaaaaa" + dataURL);
// console.log("Canvas Image " + dataURL);
// document.getElementById('txt').href = dataURL;
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
}
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
Click Me!!
<br />
<img id="preview" />