3

We need product personalization feature as here, means we want customers to upload the product image and add text & color from product view page.

Then when customer buys product, we will send a product with same image. How we can use ImageMagick to implement this kind of feature. How to install imagemagick to magento site and use it.

Edit

I want to know how we can use imagemagick for creating particular feature.

Is we need place imagemagick folder in magento root or is we have to create any modules to implement the features. please give examples to implement some features.

Edit 2

as a 1st step, we are using magento default custom options to upload files [images] in product view page, now we want to replace the Product images by images uploaded through custom option.

enter image description here

2

Use below link for imagemagick installation

http://php.net/manual/en/imagick.setup.php

<script>
var canvas = new fabric.Canvas('canvas');
/*
Design tool logic like add text, image, etc ....
*/
/*When user save design or add to cart user below for export canvas data into JSON and save it into database or json file*/
var json = JSON.stringify(canvas.toJSON());
</script>

Below is the sample for getting data from JSON and providing data to imagemagick for text generation. You can also provide image data to imagemagick

<?php
/*$data will be json of the canvas which saved in database it json file*/
$personalizeData = json_decode($data);
/* process texts */
        $i = 0;
        foreach ($personalizeData->objects as $object) {
            if ($object->type == 'text' && (!empty($object->text) && trim($object->text) !='\n')) {
                if($object->fontFamily == 'arial'){
                    $font = 'fonts/Arial.ttf';
                }elseif($object->fontFamily == 'Verdana'){
                    $font = 'fonts/Verdana.ttf';
                }elseif($object->fontFamily == 'Times New Roman'){
                    $font = 'Times-Roman';
                }

                $font = fontPath.$font;
                $fontSize = $object->fontSize * $ratio;
                $left = $object->left * $ratio;
                $top = $object->top * $ratio;

                $w = $object->width * $ratio;
                $h = $object->height * $ratio;
                $rgb = hex2rgb($object->fill);
                if($rgb){
                    $rgb[] = $object->opacity;
                    $rgba = 'rgba('.implode(",",$rgb).')';
                }else{
                    $rgba = $object->fill;
                }

                $fontText = str_replace("'","'\\''",$object->text);
                if(!empty($fontText) || $fontText !='\n'){
                    /*Imagemagick command for generating text on image*/
                    exec("convert -size {$w}x{$h} -background 'transparent' -fill '{$rgba}' -font {$font} -gravity Center label:'{$fontText}' text{$i}.png");

                    if ($object->angle != '0') { /* rotate text and set updated left top */
                    /*Imagemagick command for generating text on image*/
                        exec("convert -rotate {$object->angle} -background transparent text{$i}.png text{$i}.png");
                        if($attSetName == 'Photo Collage'){
                            $left = $object->finalLeft * $ratio;
                            $top = $object->finalTop * $ratio;
                            $left+=600;
                            $top+=600;
                        }else{
                            $left = $object->finalLeft * $ratio;
                            $top = $object->finalTop * $ratio;
                        }
                    }
                    /*Imagemagick command for generating text on image*/
                    exec("/usr/local/bin/composite -geometry +{$left}+{$top} {$baseDir}text{$i}.png {$imgName} {$imgName}");
                    $i++;
                }
            }
        } 
?>

You can canvas.toSVG() also for getting SVG from the canvas with fabric.js

SVG is better option compare to json data and use for generating output.

https://inkscape.org/en/doc/inkscape-man.html

Inkscape has the command line option where u can convert SVG to PDF,PNG and to many other options.

  • Thanks a lot, nice links , 1st step, I used custom options to upload image from product view page, but i want to replace the product image by image uploaded by custom options as here, can you please help me for this – Baby in Magento Jul 26 '16 at 11:59
  • They are not allow to change product image on above provided link. User can upload as many images they want. if you want change the product image with the help of custom option like IPhone model 4 , 4s, 5, 5s etc, you can add custom field in the admin with custom option and when user change the custom option product model you can change the phone model. – Ajay Jul 26 '16 at 14:47
  • can you please help how to use the above code , is i need to place in view.phtml file ? – Baby in Magento Jul 27 '16 at 10:56
  • also is i need to run any commands to make this work ? is this is command in proepr for mat : convert -size {$w}x{$h} -background 'transparent' -fill '{$rgba}' -font {$font} -gravity Center label:'{$fontText}' text{$i}.png – Baby in Magento Jul 28 '16 at 5:58
  • you can use above script once user placed the order. On order success you can get the string of the canvas which is saved in database. – Ajay Jul 28 '16 at 6:53
7
+150

You can install imagick "easily" if you have access to the server with, one of the following commands:

After image magick is installed, you can use the whole imagick lib: http://php.net/manual/de/book.imagick.php

  • Thanks, we installed in server, which is better to use for Product Personalization feature - gd library, canvas or imagemagick ? – Baby in Magento Jul 20 '16 at 11:57
  • how i can use complete imagick lib , Is i need to download complete imagemagick from here & place in magento lib folder ? if not, can you give one example. – Baby in Magento Jul 20 '16 at 12:42
  • imagick is a pecl extension, therefore "built in" (after you installed it with pecl). pecl should take care of all dependencies. And to answer your first question: imagick is far more powerful than GD and most of the time brings nicer results. But in the end is the tool you need the one which does the job. – Fabian Blechschmidt Jul 20 '16 at 14:15
  • Thats nice, can you please help me for uploading product images from Product view page with code. so that i can follow same & try for other parts of feature. – Baby in Magento Jul 20 '16 at 16:45
  • Uploading images is easy, you can just add (a couple of) custom option(s). But building a configurator is huge. – Fabian Blechschmidt Jul 20 '16 at 19:53
5

There is presently no free extension that meet your requirements. I suggest you look into some HTML5 Canvas javascript libraries to achieve at least the 'designer' portion of your requirement. There are currently a few dozen available freely. Here are a few of the most popular ones (according to # of Github watchers):

http://www.createjs.com/#!/EaselJS
http://kineticjs.com/
http://jonobr1.github.io/two.js/
http://fabricjs.com/

Here is an exhaustive list with features and # of github watchers, links, links to sites and demos; compiled by the author of Fabric.js, @kangax. This is a great feature matrix:

https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0

I imagine it would be fairly easy for you to develop one of these libraries into a fully-featured drop-in extension and contribute it back to the community.

Source Here and Credit goes to @philwinkle

OR You can use extension i found is Milople Personalized Product

  • Thanks a lot, nice links , 1st step, I used custom options to upload image from product view page, but i want to replace the product image by image uploaded by custom options as here, can you please help me for this – Baby in Magento Jul 26 '16 at 11:58
  • You can use html input type file instead of custom options – Bhupendra Jadeja Jul 26 '16 at 12:04
  • if you update the answer with code, it will be very helpfull.... – Baby in Magento Jul 26 '16 at 12:05
  • what you are using for product image – Bhupendra Jadeja Jul 26 '16 at 12:08
  • we are using magento default custom options to upload files [images] as here , you can see file upload otpions below price. – Baby in Magento Jul 26 '16 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.