Choose image

Upload image

   
Take a photo
Uploading


Upload a tattoo shape



Rotate tattoo shape : " Click an item on avatar to rotate it "



Choose tattoo shapes
Seems You have exceeded the maximum number of Tattoos shapes :) .

Resize text : " Click a text on avatar to resize it "
12px

Rotate text : " Click a text on avatar to rotate it "

Font Color

Fonts
  • Chewy
  • Bangers
  • Amatic+SC
  • Alegreya
  • Orbitron
  • Playfair+Display+SC
  • Pinyon+Script
  • Sigmar+One
  • Pacifico
  • Lobster
"; } function VoucherPrint(source) { Pagelink = "about:blank"; var pwa = window.open(Pagelink, "_new"); pwa.document.open(); pwa.document.write(VoucherSourcetoPrint(source)); pwa.document.close(); } jQuery(document).ready(function ($) { // Initialise the canvas var exportCanvas = document.getElementById('printable'); var canvasContainer = document.getElementById('convascontent'); html2canvas(exportCanvas, { onrendered: function(canvas) { canvasContainer.appendChild(canvas); } }); // Export Design $('.saveimge').click(function(){ setTimeout(function(){ $('.saveimge, .divhidex').hide(); $('.Downloadimage,.Down,.sharei,.shareimage,.prin,.printimg').css('visibility', 'visible'); } , 7000); $('#printable').find('i').css('visibility', 'hidden'); $('#printable').find('.ui-icon').css('visibility', 'hidden'); var exportCanvas = document.getElementById('printable'); var canvasContainer = document.getElementById('convascontent'); html2canvas(exportCanvas, { onrendered: function(canvas) { $('#convascontent').html(' '); canvasContainer.appendChild(canvas); $('#convascontent').find('canvas').attr('id','mycanvas'); } }); $('body').append("
Generating your design
"); setTimeout(function(){ // display options again $('#printable').find('i').css('visibility', 'visible'); $('#printable').find('.ui-icon').css('visibility', 'visible'); var oCanvas = document.getElementById("mycanvas"); var canvasData = oCanvas.toDataURL("image/png"); var name='ZCZBP'; var postData = "canvasData="+canvasData+"&name="+name ; var ajax = new XMLHttpRequest(); ajax.open("POST","http://www.dearkerala.com/tattoo/wp-content/plugins/tattoodesigner/save.php",true); ajax.setRequestHeader('Content-Type', 'canvas/upload'); ajax.onreadystatechange=function() { if (ajax.readyState == 4) { $('.overlay').remove(); alert('Image successfully saved, you can download it & share it on social networks.'); $('.Downloadimage').attr("href", "http://www.dearkerala.com/tattoo/wp-content/plugins/tattoodesigner/tattoos/" + ajax.responseText + "").attr("download",'My_Tattoo.png'); okok="http://www.dearkerala.com/tattoo/wp-content/plugins/tattoodesigner/tattoos/" + ajax.responseText + ""; res = ajax.responseText; } } ajax.send( postData ); } , 9000); //return false; }); var okok=""; $('.printimg').click(function(){ VoucherPrint(okok); return false; }); ; var urltofile='http://www.dearkerala.com/tattoo/wp-content/plugins/tattoodesigner/server/upload_avatar.php'; ; var urltofile1='http://www.dearkerala.com/tattoo/wp-content/plugins/tattoodesigner/assets/img/default-avatar.png'; ; var urltofile2='http://www.dearkerala.com/tattoo/wp-content/plugins/tattoodesigner/'; $(document).on('click', '.categories a', function(e){ var src = $(this).find('img').attr('src'); if( src.indexOf( 'images' ) != -1 ){ $('.categories').find('img[alt="imagen"]').css('border-bottom','thick dotted #E9E9E9'); $('.categories').find('img[alt="tattoosen"]').css('border','').css('backgroundColor',''); $('.categories').find('img[alt="texten"]').css('border','').css('backgroundColor',''); $('.imagesdiv').show(); $('.tattoosdiv').hide(); $('.textsdiv').hide(); return false; } if( src.indexOf( 'tattoos' ) != -1 ){ $('.categories').find('img[alt="tattoosen"]').css('border-bottom','thick dotted #E9E9E9'); $('.categories').find('img[alt="imagen"]').css('border','').css('backgroundColor',''); $('.categories').find('img[alt="texten"]').css('border','').css('backgroundColor',''); $('.tattoosdiv').show(); $('.imagesdiv').hide(); $('.textsdiv').hide(); $(".Tattooshape").show(); $("#neckmax").hide(); return false; } if( src.indexOf( 'texts' ) != -1 ){ $('.categories').find('img[alt="texten"]').css('border-bottom','thick dotted #E9E9E9'); $('.categories').find('img[alt="imagen"]').css('border','').css('backgroundColor',''); $('.categories').find('img[alt="tattoosen"]').css('border','').css('backgroundColor',''); $('.textsdiv').show(); $('.tattoosdiv').hide(); $('.imagesdiv').hide(); return false; } }); $('.hidex').click(function(){ $('.hidex').hide(); $('.showx').show(); $('#printable').find('i').css('visibility', 'hidden'); $('#printable').find('.ui-icon').css('visibility', 'hidden'); return false; }); $('.showx').click(function(){ $('.showx').hide(); $('.hidex').show(); $('#printable').find('i').css('visibility', 'visible'); $('#printable').find('.ui-icon').css('visibility', 'visible'); return false; }); // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // ;(function($, window, document, undefined) { // Detect XMLHttpRequest support $.support.xhrUpload = !!(window.XMLHttpRequest && window.File && window.FileReader && window.FileList && window.Blob && window.FormData); // Detect getUserMedia support $.support.getUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); // Detect Jcrop support $.support.Jcrop = !!$.Jcrop; // Detect JPEGCam support $.support.Webcam = !!window.Webcam; var // Plugin name pluginName = 'imgPicker', // Default plugin options defaults = { // Upload url (Value Type: string) url: 'server/upload.php', // DropZone (See Plugin.prototype.init()) //dropZone: null, // Whether crop is enabled (Value Type: boolean) crop: true, // Aspect ratio of w/h (Value Type: decimal) aspectRatio: null, // Minimum width/height, use 0 for unbounded dimension (Value Type: array [ w, h ]) minSize: null, // Maximum width/height, use 0 for unbounded dimension (Value Type: array [ w, h ]) maxSize: null, // Set an initial selection area (Value Type: array [ x, y, x2, y2 ]) setSelect: null, // Flash swf url swf: 'assets/webcam.swf', // Flash swf width/height (Value Type: array [ w, h ]) swfSize: [470, 350], // Custom data to be passed to server (Value Type: object) data: {}, // Messages messages: { selectimg: 'Please select a image to upload', parsererror: 'Invalid response', webcamerror: 'Webcam Error: ', uploading: 'Uploading...', error: 'Unexpected error', datauri: 'Cannot locate image format in Data URI', webcamjs: 'Flash webcam not found', upgrade: 'This feature is not available in this browser', loading: 'Loading image...', saving: 'Saving...', jcrop: 'jQuery Jcrop not found', minCropWidth: 'Crop selection requires a minimum width of ', maxCropWidth: 'Crop selection exceeds maximum width of ', minCropHeight: 'Crop selection requires a height of ', maxCropHeight: 'Crop selection exceeds maximum height of ', img404: 'Error 404: No image was found' }, }, // HTML5 webcam stream stream, // IframeTransport iframe counter counter = 0; // Plugin constructor function Plugin(container, options) { this.options = $.extend({}, defaults, options); this.container = $(container); this.init(); } // Plugin functions Plugin.prototype = { // Initialization function init: function() { // Add click events for the buttons this.elem('.ip-upload').on('change', 'input', $.proxy(this.upload, this)); this.elem('.ip-webcam').on('click', $.proxy(this.webcam, this)); this.elem('.ip-edit').on('click', $.proxy(this.edit, this)); this.elem('.ip-delete').on('click', $.proxy(this._delete, this)); this.elem('.ip-cancel').on('click', $.proxy(this.reset, this)); if (this.options.dropZone === undefined) this.options.dropZone = this.container; var self = this, trigger = $('[data-ip-modal="#'+ this.container.attr('id') +'"]'); if (trigger.length) { // Modal events this.container.on({ 'show.ip.modal': function() { self.container.fadeIn(150, function() { $(this).trigger('shown.ip.modal', self); }); }, 'hide.ip.modal': function() { self.container.fadeOut(150, function() { self.reset(); $(this).trigger('hidden.ip.modal', self); }); } }); // Add click event on the button to open modal trigger.on('click', function(e) { e.preventDefault(); self.modal('show'); self.elem('.ip-close').off().on('click', function() { self.modal('hide'); }); }); if (this.options.dropZone === undefined) this.options.dropZone = this.elem('.ip-modal-content'); } // Drag & drop upload if (this.options.dropZone) { this.options.dropZone.on('dragenter', function(e) { e.stopPropagation(); e.preventDefault(); }).on('dragover', function(e) { e.stopPropagation(); e.preventDefault(); }).on('drop', function(e) { e.preventDefault(); if (e.originalEvent.dataTransfer.files && e.originalEvent.dataTransfer.files[0]) { self.reset(); self.handleFileUpload(e.originalEvent.dataTransfer.files[0]); } }); } if (this.options.loadComplete) this.load(); }, // Modal function, show/hide modal modal: function(action) { this.container.trigger(action + '.ip.modal'); }, // Autoload image from server load: function() { var self = this; $.ajax({ url: this.options.url, dataType: 'json', data: {action: 'load', data: this.options.data}, success: function(response) { self.dispatch('loadComplete', response); } }); }, // Upload init upload: function(event) { this.reset(); // Iframe Transport fallback if (!$.support.xhrUpload) return this.iframeTransport(event); // XHR Upload if (event.target.files && event.target.files[0]) this.handleFileUpload(event.target.files[0]); $(event.target).val(''); }, // Iframe Transport upload iframeTransport: function(event) { var iframe, form, self = this, fileInput = $(event.target), parent = fileInput.parent(), fileInputClone = fileInput.clone(); this.dispatch('uploadProgress', 100); // Create & add iframe to body iframe = $('') .appendTo('body') .on('load', function() { self.dispatch('uploadProgressComplete', function() { try { var response = $.parseJSON( iframe.contents().find('body').html() ); } catch(e) {} // Check for response if (response) { self.alert('', 'hide'); self.uploadComplete(response); } else self.alert(self.i18n('parsererror'), 'error'); // Remove iframe & form setTimeout(function() { iframe.remove(); form.remove(); parent.append(fileInputClone); }, 100); }); }); // Create form form = $('
'); form.prop('method', 'POST'); form.prop('action', this.options.url); form.prop('target', iframe.prop('name')); form.prop('enctype', 'multipart/form-data'); form.prop('encoding', 'multipart/form-data'); form.prop({action: this.options.url, target: iframe.prop('name')}); form.append(fileInput); form.append(''); // Add custom data to the form if (this.options.data) $.each(this.options.data, function (name, value) { $('').prop('name', 'data['+name+']').val(value).appendTo(form); }); // Append the form to body and submit form.appendTo('body').trigger('submit'); }, // Webcam snapshot webcam: function() { this.reset(); // Flash webcam fallback if (!$.support.getUserMedia) return this.flashWebcam(); // HTML5 Webcam with