How to export front and back of this tshirt

[ducbot]

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]

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]

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]

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

[ducbot]

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]

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]

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

[imomin]

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" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-46974259.

[Elvinas]

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]

No have not got chance to work on it. Feel free to use it. On Jul 3, 2014 11:25 PM, "Elvinas" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-48008009.

[imomin]

What features you are looking for? On Jul 3, 2014 11:25 PM, "Elvinas" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-48008009.

[Artyom7]

Please contact with me via email , my mail artyomtt77@mail.ru (i need also modify your script, i will send very detailed plan)

[Elvinas]

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]

Can you help me to implement a few functions?

[imomin]

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" notifications@github.com wrote:

Can you help me to implement a few functions?

— Reply to this email directly or view it on GitHub https://github.com/imomin/CustomTShirt/issues/1#issuecomment-48466988.

[Elvinas]

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]

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

<canvas id="tcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;">

On Mon, Jul 14, 2014 at 12:58 PM, Elvinas notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-48934168.

[Elvinas]

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]

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 notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-48937404.

[Elvinas]

Thank you again you helped a lot...

[Elvinas]

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]

Hmm.... Issue might with CSS for the div. On Jul 14, 2014 4:16 PM, "Elvinas" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-48960953.

[Elvinas]

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]

Works find for me on Chrome 35.0.1916.153 on Windows 7.

On Mon, Jul 21, 2014 at 2:37 PM, Elvinas notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-49654474.

[Elvinas]

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]

Again works fine. On Jul 23, 2014 9:48 AM, "Elvinas" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-49884013.

[airnayden]

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:

1. Checking which side is chosen (front/back). I have created a variable that indicates it
2. canvas.toDataUrl for the selected side
3. switch the sides with a and b variables and parsing the canvas
4. 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]

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" notifications@github.com 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:

1. Checking which side is chosen (front/back). I have created a variable that indicates it
2. canvas.toDataUrl for the selected side
3. switch the sides with a and b variables and parsing the canvas
4. 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-51285138.

[airnayden]

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

[Elvinas]

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

[ashokbharathi]

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]

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" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-51838307.

[airnayden]

@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]

I would be grateful if you could share it: elvinasblcns@gmail.com

[Elvinas]

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]

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

[Elvinas]

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]

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]

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

[airnayden]

No probs :P

[Elvinas]

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]

@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]

Airnayde, can you please share with me also. I would greatly appreciate it. blee50139@gmail.com Thanks !

[hkharod]

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]

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

[anshad]

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

[airnayden]

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" notifications@github.com 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 https://github.com/imomin/CustomTShirt/issues/1#issuecomment-136230901.

[anshad]

Give me your mail id.

[imomin]

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" notifications@github.com wrote:

Give me your mail id.

— Reply to this email directly or view it on GitHub https://github.com/imomin/CustomTShirt/issues/1#issuecomment-136489997.

[airnayden]

Airnayden@gmail.com On Sep 1, 2015 12:25 AM, "Imtiyaz Momin" notifications@github.com 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" notifications@github.com wrote:

Give me your mail id.

— Reply to this email directly or view it on GitHub <https://github.com/imomin/CustomTShirt/issues/1#issuecomment-136489997 .

— Reply to this email directly or view it on GitHub https://github.com/imomin/CustomTShirt/issues/1#issuecomment-136506196.

[yaslia]

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.