0

I am working on customizing image like represent.com

I got all things like upload image, change colors of t-shirt and change add text on t-shirt.

But when i am going to save my customized t-shirt design as image it converted to image but it is not same as i have customized. There is black rectangle on t-shirt only if i will add image or add text on t-shirt otherwise if i change color of t-shirt then it is working well.

How should i upload it on php server after convert it to image?

I have used canvg plugin canvg plugin My SVG code : 

    <svg id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>Created with Represent</desc>

    <defs>
        <pattern x="0" y="0" width="380" height="380" patternUnits="userSpaceOnUse" id="Sibvs5t8i8" viewBox="0 0 380 380">
            <image xlink:href="https://d28c8q1a6j07u6.cloudfront.net/assets/templates/heather-357782c6b1665b9d38d1e6b3c8a759a5.png" preserveAspectRatio="none" x="0" y="0" width="380" height="380"></image>
        </pattern>
        <mask id="Sibvs5t8ig">
            <g>
                <rect x="-2000" y="-2000" width="4000" height="4000" fill="#444444"></rect>
                <rect x="-160" y="-309" width="340" height="610" fill="#ffffff" real_size="10,14"></rect>
            </g>
        </mask>
    </defs>

    <g transform="matrix(1,0,0,1,367.5,189.5)" class="canvas_centered">

        <g class="canvas_layers" transform="matrix(0.361,0,0,0.361,0,0)">
            <g class="canvas_background">

                <rect class="canvas_variant_color" width="998" height="998" x="-499" y="-499" fill="#fff2d3"></rect>
                <rect fill="url('#Sibvs5t8i8')" class="canvas_variant_heather" width="998" height="998" x="-499" y="-499" style="opacity: 0;"></rect>
                <rect x="-160" y="-309" width="340" height="610" class="canvas_border" real_size="10,14"></rect>
                <line x1="10" x2="10" y1="-309" y2="301" class="canvas_guide"></line>

            </g>

            <g mask="url('#Sibvs5t8ig')" class="canvas_objects">

                <g transform="matrix(1,0,0,1,-160,-298.2784)" style="display: block;"><image xlink:href="http://localhost/craftedusa_prod/t-shirts/uploads/13.jpg" preserveAspectRatio="none" x="0" y="0" width="340" height="272.3214285714286" style="display: block; opacity: 1;"></image></g>
            </g>
            <g class="canvas_mockups">

                <g class="canvas_styles">

                    <g class="canvas_style">

                        <g data-side="front" style="opacity: 1;">
                            <image xlink:href="http://localhost/craftedusa_prod//images/custom_product/shortsleevetee_male_front.png" preserveAspectRatio="none" x="-500" y="-500" width="1000" height="1000" style="display: block;" class="is-style"></image>
                        </g>
                        <g data-side="back" style="opacity: 0;">
                            <image xlink:href="http://localhost/craftedusa_prod//images/custom_product/unisex-shortsleevetee-back.png" preserveAspectRatio="none" x="-500" y="-500" width="1000" height="1000" style="display: none;" class="is-style"></image>
                        </g>
                    </g>
                </g></g>
        </g>
    </g>
    <g class="canvas_tmp"></g>
</svg>

My custom Design: customize design

Converted image from SVG: Converted image from SVG

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Yatin Mistry
  • 1,246
  • 2
  • 13
  • 35
  • canvg isn't able to convert external images from svg elements. You'll need to first convert them to base64 uri. You can find a dirty solution in [here](http://stackoverflow.com/a/30135485/3702797). *(note: OP was using google charts but the conversion functions don't require it)* – Kaiido Jul 09 '15 at 06:46
  • @Kaiido I will try your solution. – Yatin Mistry Jul 09 '15 at 07:01
  • Ok, let me know if you've got issues, I may rewrite it here to avoid the noise (what you want are the last two functions), and you may want to check in the answer's history, there was a way to convert those images to dataURL once they already have been loaded in the svg – Kaiido Jul 09 '15 at 07:06
  • hi @Yatin , can you please send me complete code of your project : `upload image, change colors of t-shirt and change add text on t-shirt.` –  Dec 20 '18 at 10:06
  • @vickeycolors currenlty i don't have access to this project. – Yatin Mistry Dec 21 '18 at 08:35

0 Answers0