How to export front and back of this tshirt #1

ducbot · 2013-09-21T17:14:20Z

Dear Imomin,

I really interested about your sharing source to build a designing tshirt however i don't know how to export front and back of this tshirt.

Can you show me how to do it ?

Thank you !

imomin · 2013-09-21T20:13:48Z

I did not get chance to add export option. You will have to use to use "toDataUrlWithMultiplier". You can get more information from https://groups.google.com/forum/m/#!msg/fabricjs/u8d_rwuNffI/rs7BwiwQLEMJ

ducbot · 2013-09-29T12:44:28Z

Hi Imomin,

I tried to export whole of front and back of this t-shirt however it shows from canvas design area only, the t-shirt image doesn't show.

Can you send me a short code to export to an another image, i would like that it contains whole of front and back and the t-shirt image.

Thank you !

imomin · 2013-09-30T22:58:29Z

The export is to generate file for printing. What you are asking, I believe is pre-view of your t-shirt?

ducbot · 2013-10-26T07:33:58Z

Hi Imomin,

Can you send me an example code to preview a new image of front and back after designing the t-shirt ?
Do you use skype instant message service ? my skype id is: hoangduc88vn

Thanks you !

imomin · 2013-10-27T22:54:28Z

Can you try following, Create an image tag and give it an ID of "preview". In your javascript, add following script.

dataurl = canvas.toDataURL();
document.getElementById('preview').src = dataurl;

Artyom7 · 2014-06-24T14:01:59Z

Hello Imomin, thanks for good solution . What license is published your code? Mit or other? Thanks for answer.

imomin · 2014-06-24T14:25:06Z

I don't understand licenses. It is not perfect solution but free to use it
however you like for whatever purpose.
On Jun 24, 2014 9:02 AM, "Artyom7" [email protected] wrote:

Hello Imomin, thanks for good solution . What license is published your
code? Mit or other? Thanks for answer.

—
Reply to this email directly or view it on GitHub
#1 (comment).

Elvinas · 2014-07-04T04:25:48Z

Hello, I'm really interested in your T shirt design tool application, it's good example to learn from, did you update this module since then? I mean do you have t shirt application with more functionality? If so, I would really appreciate if you could upload it on GitHub. I would also like to make a donation for your job.

imomin · 2014-07-04T09:40:39Z

No have not got chance to work on it. Feel free to use it.
On Jul 3, 2014 11:25 PM, "Elvinas" [email protected] wrote:

Hello, I'm really interested in your T shirt design tool application, it's
good example to learn from, did you update this module since then? I mean
do you have t shirt application with more functionality? If so, I would
really appreciate if you could upload it on GitHub. I would also like to
make a donation for your job.

—
Reply to this email directly or view it on GitHub
#1 (comment).

imomin · 2014-07-04T10:28:42Z

What features you are looking for?
On Jul 3, 2014 11:25 PM, "Elvinas" [email protected] wrote:

Hello, I'm really interested in your T shirt design tool application, it's
good example to learn from, did you update this module since then? I mean
do you have t shirt application with more functionality? If so, I would
really appreciate if you could upload it on GitHub. I would also like to
make a donation for your job.

—
Reply to this email directly or view it on GitHub
#1 (comment).

Artyom7 · 2014-07-04T10:51:53Z

Please contact with me via email , my mail [email protected]
(i need also modify your script, i will send very detailed plan)

Elvinas · 2014-07-04T11:01:55Z

I would need useful functions like: Undo/Redo, Save canvas to your computer (JPG, PNG), upload image (JPG, PNG) from computer, some text effects, change object opacity.

Any useful function would be appreciated. Something similar like this: http://www.riaxe.com/tshirtapphtml5/

I just started to explore fabric.js and I can code many functions on myself but at some point I feel that I will stuck anyway.

Elvinas · 2014-07-09T13:07:49Z

Can you help me to implement a few functions?

imomin · 2014-07-09T13:33:52Z

Hi Elvinas,
Its on my list to do. However, I have other priorities and I am tied up
with it. It may take a while before I can work on it. If it is urgent then
you can ask others in the community (
https://groups.google.com/forum/m/#!forum/fabricjs) for help.
On Jul 9, 2014 8:07 AM, "Elvinas" [email protected] wrote:

Can you help me to implement a few functions?

—
Reply to this email directly or view it on GitHub
#1 (comment).

Elvinas · 2014-07-14T17:58:54Z

Hello,

I would like to ask you about your t shirt module again.
How can I change drawing boundaries? I mean I need my own parameters where I could create drawing area, is there easy way or software where you can draw drawing area custom shape and get exact coordinates?

imomin · 2014-07-14T18:03:20Z

Try changing following in the js file

line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000",
"strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000",
"strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000",
"strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000",
"strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});

And following in index.html page

On Mon, Jul 14, 2014 at 12:58 PM, Elvinas [email protected] wrote:

Hello,

I would like to ask you about your t shirt module again.
How can I change drawing boundaries? I mean I need my own parameters where
I can create drawing area, is there easy way or software where you can draw
drawing area custom shape and get exact coordinates?

—
Reply to this email directly or view it on GitHub
#1 (comment).

Elvinas · 2014-07-14T18:24:38Z

Thank you for your fast response!

I don't want to ask too many questions but how exactly does Tshirt color changer work? I mean when you click on color-preview, I don't see any code related with color-preview class, so how does color change?

imomin · 2014-07-14T18:27:34Z

It changes the color of the div. the t-shirt image is transparent.

$('.color-preview').click(function(){
var color = $(this).css("background-color");
document.getElementById("shirtDiv").style.backgroundColor = color;
});

On Mon, Jul 14, 2014 at 1:24 PM, Elvinas [email protected] wrote:

Thank you for your fast response!

I don't want to ask too many questions but how exactly does Tshirt color
changer work? I mean when you click on color-preview, I don't see any code
related with color-preview class, so how does color change?

—
Reply to this email directly or view it on GitHub
#1 (comment).

Elvinas · 2014-07-14T18:37:56Z

Thank you again you helped a lot...

Elvinas · 2014-07-14T21:16:35Z

I'm trying to implement your tShirt module on my own interface: http://www.atvirukai.eu/tshirt/
There's something that I don't understand, I want to position drawing boundaries correctly. You can see black solid 1px border, but it seems that if I check my result with different screen sizes canvas is not in the same position, what am I doing wrong?

imomin · 2014-07-14T21:17:49Z

Hmm.... Issue might with CSS for the div.
On Jul 14, 2014 4:16 PM, "Elvinas" [email protected] wrote:

I'm trying to implement your tShirt module on my own interface:
http://www.atvirukai.eu/tshirt/
There's something that I don't understand, I want to position drawing
boundaries correctly. You can see black solid 1px border, but it seems that
if I check my result with different screen sizes canvas is not in the same
position, what am I doing wrong?

—
Reply to this email directly or view it on GitHub
#1 (comment).

Elvinas · 2014-07-21T19:37:40Z

Please can you check my website again?

I don't understand what is wrong when I use Safari on Windows it doesn't let me click on added object on the canvas I mean it's not even clickable, on other browsers it works perfectly. Maybe it's something wrong with CSS?

imomin · 2014-07-21T19:41:46Z

Works find for me on Chrome 35.0.1916.153 on Windows 7.

On Mon, Jul 21, 2014 at 2:37 PM, Elvinas [email protected] wrote:

Please can you check my website again?

I don't understand what is wrong when I use Safari on Windows it doesn't
let me click on added object on the canvas I mean it's not even clickable,
on other browsers it works perfectly. Maybe it's something wrong with CSS?

—
Reply to this email directly or view it on GitHub
#1 (comment).

Elvinas · 2014-07-23T14:48:44Z

Hello,

Can you help me find an error?
If you can check my website again and click "TEKSTAS" on left side, text should appear on canvas, then select "TEKSTAS" on right side and try to apply font. and it doesn't work. setFont() function doesn't work but in your example it works perfectly. Console shows: Unable to get property 'getActiveObject' of undefined or null reference. I checked many times everything should be ok, but somehow setFont function can't get activeObject.

imomin · 2014-07-24T03:39:47Z

Again works fine.
On Jul 23, 2014 9:48 AM, "Elvinas" [email protected] wrote:

Hello,

Can you help me find an error?
If you can check my website again and click "TEKSTAS" on left side, text
should appear on canvas, then select "TEKSTAS" on right side and try to
apply font. and it doesn't work. setFont() function doesn't work but in
your example it works perfectly. Console shows: Unable to get property
'getActiveObject' of undefined or null reference. I checked many times
everything should be ok, but somehow setFont function can't get
activeObject.

—
Reply to this email directly or view it on GitHub
#1 (comment).

airnayden · 2014-08-06T01:55:06Z

Hello, @imomin !
I'm using your script to create a customised T-Shirt Designer, but I have a big problem. I can't export front and back side of the canvas at the same time!

I'm trying like this:

Checking which side is chosen (front/back). I have created a variable that indicates it
canvas.toDataUrl for the selected side
switch the sides with a and b variables and parsing the canvas
canvas.toDataUrl to the selected side

The result is that only the first canvas gets exported... Also the b variable I noticed, that the contents of it dissappears when I try to get back to the back side.

Any ideas?

imomin · 2014-08-06T02:18:49Z

Hi Airnayden,
I haven't work on the export yet. Also, I haven't worked on this project
for a long time and I am currently very busy to continue working on it. I
would recommend to get help from the Google group community.
On Aug 5, 2014 8:55 PM, "airnayden" [email protected] wrote:

Hello, @imomin https://github.com/imomin !
I'm using your script to create a customised T-Shirt Designer, but I have
a big problem. I can't export front and back side of the canvas at the same
time!

I'm trying like this:

Checking which side is chosen (front/back). I have created a
variable that indicates it

canvas.toDataUrl for the selected side

switch the sides with a and b variables and parsing the canvas

canvas.toDataUrl to the selected side

The result is that only the first canvas gets exported... Also the b
variable I noticed, that the contents of it dissappears when I try to get
back to the back side.

Any ideas?

—
Reply to this email directly or view it on GitHub
#1 (comment).

airnayden · 2014-08-06T02:21:52Z

Ok, I figured it out about dissapearing of the b variable. But still can't export both sides at a time...

Elvinas · 2014-08-06T08:29:12Z

Can you upload your code to some server or such, it would be more convenient to help you out.

ashokbharathi · 2014-08-11T20:47:18Z

Hi Imomin,
Thanks for this great tool.I am struggling with the below things can you Please help me.
For the iphone case you are applying the design as a background for the transparent iphone images. It works well on visual.I can set the iphone image to the canvas background and export. but how to export the iphone case with the design images?also different background colors with the t shirt?

imomin · 2014-08-11T20:55:43Z

Ashok,
I have not worked on this project for a long time. I've used fabric.js
library I am sure they some kind of option to export the canvas with
background.
On Aug 11, 2014 3:47 PM, "ashokbharathi" [email protected] wrote:

Hi Imomin,
Thanks for this great tool.I am struggling with the below things can you
Please help me.
For the iphone case you are applying the design as a background for the
transparent iphone images. It works well on visual.I can set the iphone
image to the canvas background and export. but how to export the iphone
case with the design images?also different background colors with the t
shirt?

—
Reply to this email directly or view it on GitHub
#1 (comment).

airnayden · 2014-08-11T20:58:12Z

@Elvinas I managed to export front and back. What i did is to save front and back canvas with every change, so in the end I have 2 vars.

@ashokbharathi I exported front and back for the shirt, with the cliparts and the backgrounds. If you want I can share the code, where PHP manages the images.

Elvinas · 2014-08-22T12:40:38Z

I would be grateful if you could share it: [email protected]

Elvinas · 2014-08-22T12:45:19Z

Hi, Imomin

Do you have an idea what can be wrong, I'm trying to implement font change function from yours, but I get an error that setFont function is not defined, in your example it works but when I paste it to my own example somehow it doesn't. and if I place this function outside jQuery ready function is says that activeObject doesn't exist. What can be wrong? at this time I'm using my simple example without bootstrap css.

I place fonts in html with ul li elements including onclick function with a function that sets font.

renxcode · 2014-08-23T04:56:53Z

hi ..your application is so amazing but why i cant preview the hoodie, tank tops and long sleeves shirt?

Elvinas · 2014-09-15T04:13:47Z

Hi Imomin,

How would you approach switching front/back if I have two different icons, for front and back. How to safely check if front was clicked and if it's clicked then do nothing, and if back is clicked then it would be switched.

Thank you in advance

airnayden · 2014-09-16T08:43:09Z

I did it by assigning a variable with value 'front'. When front/back button is clicked if first checks the value of the variable and if the value is 'front' and the back button is clicked, then the value changes to 'back' and the back side of the shirt is displayed. And the same for front :)

Elvinas · 2014-09-16T08:51:04Z

Thank you it helped me to complete my task :) It seems that I was thinking way too difficult.

airnayden · 2014-09-16T08:51:40Z

No probs :P

Elvinas · 2014-09-25T14:22:07Z

Anyone knows how can I export front/back canvas in json at the same time? Because now I can only export either front or back depending on what's selected.

mctolentino · 2015-01-11T20:40:07Z

@Elvinas You could check the a and b variables in the javascript code. The canvas is saved as json every time the canvas is flipped. Maybe you could save those variables as json to a document store.

blee11 · 2015-04-24T19:38:15Z

Airnayde, can you please share with me also. I would greatly appreciate it.
[email protected]
Thanks !

hkharod · 2015-06-03T09:42:03Z

I would also very much appreciate it Airnayde! If you can post the solution here that would be awesome, a lot of people are probably trying to figure out the same thing! Thanks!!!

Yos2015 · 2015-07-12T05:00:00Z

@airnayden Hi
could you please share your code with me?.
I also need to create text editor any idea ?
Thanks

anshad · 2015-08-31T01:36:56Z

Can you please add export option in code? Need to export the design to a single image.

airnayden · 2015-08-31T05:02:32Z

Hello there. If you send me some project requirements we can arrange a deal
for completion of the code you want.

Regards
On Aug 31, 2015 4:37 AM, "Anshad VP" [email protected] wrote:

Can you please add export option in code? Need to export the design to a
single image.

—
Reply to this email directly or view it on GitHub
#1 (comment).

anshad · 2015-08-31T20:29:15Z

Give me your mail id.

imomin · 2015-08-31T21:24:59Z

If you want to contribute to the open source project then create a pull
request and I can merge your code.
On Aug 31, 2015 3:29 PM, "Anshad VP" [email protected] wrote:

Give me your mail id.

—
Reply to this email directly or view it on GitHub
#1 (comment).

airnayden · 2015-08-31T21:39:10Z

[email protected]
On Sep 1, 2015 12:25 AM, "Imtiyaz Momin" [email protected] wrote:

If you want to contribute to the open source project then create a pull
request and I can merge your code.
On Aug 31, 2015 3:29 PM, "Anshad VP" [email protected] wrote:

Give me your mail id.

—
Reply to this email directly or view it on GitHub
<#1 (comment)
.

—
Reply to this email directly or view it on GitHub
#1 (comment).

yaslia · 2015-10-11T18:04:44Z

hi,
i'm doing my uni project right now.
can you help me how to select different t-shirt to long sleeve or hoodie?
i really appreciate it if you can tell me how.

imomin · 2015-10-11T18:10:46Z

Create a function, that would replace the tshirt image with long sleeve or hoodie. Call the function on change of the drop down. It should be that simple....

I currently, do not have time to commit/help with new features. Since this is open source I hope somebody can help you and contribute to the project.

yaslia · 2015-12-08T14:08:56Z

hi, i really appreciate it if someone can help me on how to export the front back design ..
i really need that help..

dearkaran · 2017-05-05T10:15:57Z

Hello Every One i create Export Function in this script.
https://github.com/dearkaran/CustomDesignCreation Please download and test....

Khadreal · 2017-10-05T09:56:20Z

Thanks @imomin for creating this.
Thanks @dearkaran for adding the export function but is it possible to export both the front and back design at a time.

dearkaran · 2017-10-06T03:41:30Z

yes sir.... currently i create just demo of front side..... but you can try to same thing in Back side........

Best Regards

Khadreal · 2017-10-06T11:01:36Z

Thanks. But the front and back are inside one ID, I don't know how to export that.
Mind you if the back side is in view and you save, you will see the back view save and not the front view.

Thanks

dearkaran · 2017-10-07T04:35:55Z

please send me Your Source code..... so, I can fix and help you. Best Regards

…

On 6 October 2017 at 16:31, Opeyemi Ibrahim ***@***.***> wrote: Thanks. But the front and back are inside one ID, I don't know how to export that. Mind you if the back side is in view and you save, you will see the back view save and not the front view. Thanks — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANkiPYbXylg5PCpWOyH_C-UviC7CK1yyks5spgiTgaJpZM4BBY9n> .

Khadreal · 2017-10-08T14:41:01Z

Below is my code. Thanks

JS
canvas = new fabric.Canvas('tcanvas', {
hoverCursor: 'pointer',
selection: true,
selectionBorderColor:'blue'
});
canvas.on({
'object:moving': function(e) {
e.target.opacity = 0.5;
},
'object:modified': function(e) {
e.target.opacity = 1;
},
'object:selected':onObjectSelected,
'selection:cleared':onSelectedCleared
});

$('#o_back').click(function(){
$("#text-stringss").attr("id", "text-string2");

		canvas = new fabric.Canvas('tbcanvas', {
		  hoverCursor: 'pointer',
		  selection: true,
		  selectionBorderColor:'#000'
		});
			canvas.on({
			 'object:moving': function(e) {		  	
			    e.target.opacity = 0.5;
			  },
			  'object:modified': function(e) {		  	
			    e.target.opacity = 1;
			  },
			 'object:selected':onObjectSelected,
			 'selection:cleared':onSelectedCleared
		 });
		 });

What I did is on click of the back button I tried to switch the canvas

imomin closed this as completed Sep 30, 2013

imomin reopened this Sep 30, 2013

How to export front and back of this tshirt #1

How to export front and back of this tshirt #1

Comments

ducbot commented Sep 21, 2013

imomin commented Sep 21, 2013

ducbot commented Sep 29, 2013

imomin commented Sep 30, 2013

ducbot commented Oct 26, 2013

imomin commented Oct 27, 2013

Artyom7 commented Jun 24, 2014

imomin commented Jun 24, 2014

Elvinas commented Jul 4, 2014

imomin commented Jul 4, 2014

imomin commented Jul 4, 2014

Artyom7 commented Jul 4, 2014

Elvinas commented Jul 4, 2014

Elvinas commented Jul 9, 2014

imomin commented Jul 9, 2014

Elvinas commented Jul 14, 2014

imomin commented Jul 14, 2014

Elvinas commented Jul 14, 2014

imomin commented Jul 14, 2014

Elvinas commented Jul 14, 2014

Elvinas commented Jul 14, 2014

imomin commented Jul 14, 2014

Elvinas commented Jul 21, 2014

imomin commented Jul 21, 2014

Elvinas commented Jul 23, 2014

imomin commented Jul 24, 2014

airnayden commented Aug 6, 2014

imomin commented Aug 6, 2014

airnayden commented Aug 6, 2014

Elvinas commented Aug 6, 2014

ashokbharathi commented Aug 11, 2014

imomin commented Aug 11, 2014

airnayden commented Aug 11, 2014

Elvinas commented Aug 22, 2014

Elvinas commented Aug 22, 2014

renxcode commented Aug 23, 2014

Elvinas commented Sep 15, 2014

airnayden commented Sep 16, 2014

Elvinas commented Sep 16, 2014

airnayden commented Sep 16, 2014

Elvinas commented Sep 25, 2014

mctolentino commented Jan 11, 2015

blee11 commented Apr 24, 2015

hkharod commented Jun 3, 2015

Yos2015 commented Jul 12, 2015

anshad commented Aug 31, 2015

airnayden commented Aug 31, 2015

anshad commented Aug 31, 2015

imomin commented Aug 31, 2015

airnayden commented Aug 31, 2015

yaslia commented Oct 11, 2015

imomin commented Oct 11, 2015

yaslia commented Dec 8, 2015

dearkaran commented May 5, 2017

Khadreal commented Oct 5, 2017

dearkaran commented Oct 6, 2017

Khadreal commented Oct 6, 2017

dearkaran commented Oct 7, 2017 via email

Khadreal commented Oct 8, 2017