Image is occupying only in little space inside box

Image is occupying only in little space inside box - javascript

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

Related

Add box-shadow to image styling on load with fabric.js

Thanks to #ℊααnd I was able to add stroke styling to images added to the canvas. I'd like to also have a drop shadow on any images added to give them more of a "stacked" look. I've tried adding boxShadow: "5px 5px 20px 0px #888888", and taking queues from the documentation but I'm not having any luck. How would I achieve this? Styling in JS is still totally new to me. Any help would be greatly appreciated. Thanks in advance.
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: 0,
border: '#000',
stroke: '#F0F0F0',
strokeWidth: 40
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
I tried plugging all of my code into the snippet inserter but for some reason it didn't want to run there. I figure the above is what's applicable.

You could simply create a shadow object, like this ...
var shadow = {
color: '#888888',
blur: 70,
offsetX: 45,
offsetY: 45,
opacity: 0.8
}
and then, set it for the image object, like so ...
oImg.setShadow(shadow);
ᴅᴇᴍᴏ
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: '#888888',
blur: 70,
offsetX: 45,
offsetY: 45,
opacity: 0.8
}
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);
});
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>

Add image from user computer to canvas with style

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>

How to save fabricjs canvas image on another background image?

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);
}
};

Write custom text on image canvas with fabric.js and HTML5

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

Auto adjust image in canvas, If image resolution is larger than canvas size in Html5

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" />

Develop Reference

JavaScript is the programming language of the Web.

Image is occupying only in little space inside box - javascript

Related

Add box-shadow to image styling on load with fabric.js

Add image from user computer to canvas with style

How to save fabricjs canvas image on another background image?

Write custom text on image canvas with fabric.js and HTML5

Auto adjust image in canvas, If image resolution is larger than canvas size in Html5

Categories

Resources