Ð¤Ð°Ð¹Ð»Ð¾Ð²Ñ‹Ð¹ Ð¼ÐµÐ½ÐµÐ´Ð¶ÐµÑ€

Ð¤Ð°Ð¹Ð»Ð¾Ð²Ñ‹Ð¹ Ð¼ÐµÐ½ÐµÐ´Ð¶ÐµÑ€ - Ð ÐµÐ´Ð°ÐºÑ‚Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ - /home/admin/domains/octawebtools.com/public_html/wp-content/plugins/tmcaps/js/tmcaps.min.js

Ð�Ð°Ð·Ð°Ð´
/jshint esversion: 6 / /globals fabric, Picker / (function($) { "use strict"; $.fn.tmcaps = function (options) { var selector = $(this); // Default settings var settings = $.extend({ fontFamily: 'Impact, Charcoal, sans-serif', fontSize: 60, fontWeight: 'bold', // e.g. bold, normal, 400, 600, 800 fontStyle: 'normal', // Possible values: "", "normal", "italic" or "oblique". lineHeight: 1, fill: '#000', // Text color stroke: '#fff', strokeWidth: 1, textBackgroundColor: 'rgba(255,255,255,0)', textAlign: 'center', lineColor: '#F44336', lineWidth: 10, shapeColor: '#fff', borderColor: '#000', borderDashArray: [4, 4], borderOpacityWhenMoving: 0, borderScaleFactor: 2, editingBorderColor: 'rgba(0,0,0,0.5)', cornerColor: '#fff', cornerSize: 14, cornerStrokeColor: '#000', cornerStyle: 'circle', transparentCorners: false, cursorColor: '#000', cursorWidth: 2, enableRetinaScaling: true, WfontSize: 22, WfontFamily: 'Georgia, serif', WfontWeight: 'bold', WfontStyle: 'italic', Wfill: '#fff', Wstroke: 'rgba(255,255,255,0)', WstrokeWidth: 0, WtextBackgroundColor: '#000', WtextAlign: 'right', }, options); // Define Variables var c = '', img = '', imgurl = '', canvas = '', watermark = '', svg = '', svgImg = '', picker1 = '', picker2 = '', picker3 = '', picker4 = '', picker5 = '', text = '', emoji = '', rect = '', circle = '', triangle = '', templateIcon = selector.find('.tm-caps-select-template').find('i').attr('class'), drawIcon = selector.find('.tm-caps-draw').find('i').attr('class'), emojiIcon = selector.find('.tm-caps-add-emoji').find('i').attr('class'), shapeIcon = selector.find('.tm-caps-add-shape').find('i').attr('class'); // Set Fabric Settings fabric.enableGLFiltering = settings.enableGLFiltering; fabric.textureSize = parseInt(settings.textureSize); fabric.Object.prototype.borderColor = settings.borderColor; fabric.Object.prototype.borderDashArray = settings.borderDashArray; fabric.Object.prototype.borderOpacityWhenMoving = settings.borderOpacityWhenMoving; fabric.Object.prototype.borderScaleFactor = settings.borderScaleFactor; fabric.Object.prototype.editingBorderColor = settings.editingBorderColor; fabric.Object.prototype.cornerColor = settings.cornerColor; fabric.Object.prototype.cornerSize = settings.cornerSize; fabric.Object.prototype.cornerStrokeColor = settings.cornerStrokeColor; fabric.Object.prototype.cornerStyle = settings.cornerStyle; fabric.Object.prototype.transparentCorners = settings.transparentCorners; fabric.Object.prototype.cursorColor = settings.cursorColor; fabric.Object.prototype.cursorWidth = settings.cursorWidth; // Dataurl to blog function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } // Resize Canvas function resizeCanvas(canvas) { var outerCanvasContainer = selector.find('.tm-caps-wrapper')[0]; var ratio = canvas.getWidth() / canvas.getHeight(); var containerWidth = outerCanvasContainer.clientWidth; var scale = containerWidth / canvas.getWidth(); var zoom = canvas.getZoom() scale; canvas.setDimensions({width: containerWidth, height: containerWidth / ratio}); canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]); } // Reset Controls function resetControls() { picker1.setColor(settings.fill, false); picker2.setColor(settings.stroke, false); picker3.setColor(settings.textBackgroundColor, false); picker4.setColor(settings.lineColor, false); picker5.setColor(settings.shapeColor, false); selector.find('.tm-caps-btn').removeClass('active'); selector.find('.tm-caps-btn-bold').addClass('active'); selector.find('.tm-caps-btn-center').addClass('active'); selector.find('.tm-caps-select-fonts').val(settings.fontFamily); selector.find('.tm-caps-select-filters').val('nofilter'); selector.find('.tm-caps-text-size').val(selector.find('.tm-caps-text-size').data('default')); selector.find('span.tm-count-text-size').html(selector.find('.tm-caps-text-size').data('default')); selector.find('.tm-caps-stroke-size').val(selector.find('.tm-caps-stroke-size').data('default')); selector.find('span.tm-count-stroke-size').html(selector.find('.tm-caps-stroke-size').data('default')); selector.find('.tm-caps-line-width').val(selector.find('.tm-caps-line-width').data('default')); selector.find('span.tm-count-line-width').html(selector.find('.tm-caps-line-width').data('default')); } // Delete control var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='tm_delete_btn' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='256' cy='256' r='256'/%3E%3Cg%3E%3Crect x='120.001' y='239.987' transform='matrix(-0.7071 -0.7071 0.7071 -0.7071 256.0091 618.0168)' style='fill:%23FFFFFF;' width='271.997' height='32'/%3E%3Crect x='240' y='119.989' transform='matrix(-0.7071 -0.7071 0.7071 -0.7071 256.0091 618.0168)' style='fill:%23FFFFFF;' width='32' height='271.997'/%3E%3C/g%3E%3C/svg%3E"; var deleteimg = document.createElement('img'); deleteimg.src = deleteIcon; function deleteObject(eventData, transform) { var target = transform.target; var canvas = target.canvas; if (target.isDeletable === true) { canvas.remove(target); } canvas.requestRenderAll(); } function renderIcon(ctx, left, top, styleOverride, fabricObject) { if (fabricObject.isDeletable === true) { var size = 25; ctx.save(); ctx.translate(left, top); ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); ctx.drawImage(deleteimg, -size/2, -size/2, size, size); ctx.restore(); } } // Add new text control var addIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='tm_add_btn' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Ccircle style='fill:%23009688;' cx='256' cy='256' r='256'/%3E%3Cg%3E%3Crect x='240' y='120' style='fill:%23FFFFFF;' width='32' height='272'/%3E%3Crect x='120' y='240' style='fill:%23FFFFFF;' width='272' height='32'/%3E%3C/g%3E%3C/svg%3E"; var addimg = document.createElement('img'); addimg.src = addIcon; function addObject(eventData, transform) { var target = transform.target; target.clone(function(cloned) { cloned.set('originX', 'center'); cloned.set('originY', 'center'); cloned.set('left', 0.5 * canvas.width); cloned.set('top', 0.5 * canvas.height); cloned.set('isTextObject', true); cloned.set('isDeletable', true); canvas.add(cloned); }); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); } function renderAddIcon(ctx, left, top, styleOverride, fabricObject) { var size = 25; ctx.save(); ctx.translate(left, top); ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); ctx.drawImage(addimg, -size/2, -size/2, size, size); ctx.restore(); } // Send front control var sendFrontIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='25' height='25' viewBox='0 0 25 25'%3E%3Cg transform='translate(0 -1027.362)'%3E%3Ccircle cx='37.045' cy='28.409' r='12.5' fill='%232196F3' fill-rule='evenodd' transform='translate(-24.545 1011.453)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M 2,2 2,3 15,3 15,2 2,2 Z M 5.5,4.3945312 2.3183594,7.5761719 3.0253906,8.2832031 5,6.3085938 5,15 6,15 6,6.3085938 7.9746094,8.2832031 8.6816406,7.5761719 5.5,4.3945312 Z M 10,5 l 0,1 5,0 0,-1 -5,0 z m 0,3 0,1 5,0 0,-1 -5,0 z m 0,3 0,1 5,0 0,-1 -5,0 z m 0,3 0,1 5,0 0,-1 -5,0 z' color='%23000' font-family='sans-serif' font-weight='400' overflow='visible' transform='translate(4 1031.362)' style='line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal'/%3E%3C/g%3E%3C/svg%3E"; var sendFrontImg = document.createElement('img'); sendFrontImg.src = sendFrontIcon; function sendFrontObject(eventData, transform) { var target = transform.target; target.moveTo(99); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); } function renderFrontIcon(ctx, left, top, styleOverride, fabricObject) { var size = 25; ctx.save(); ctx.translate(left, top); ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); ctx.drawImage(sendFrontImg, -size/2, -size/2, size, size); ctx.restore(); } // Send back control var sendBackIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='25' height='25' viewBox='0 0 25 25'%3E%3Cg transform='translate(0 -1027.362)'%3E%3Ccircle cx='12.5' cy='1039.862' r='12.5' fill='%232196F3'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M 5,2 5,10.693359 3.0253906,8.71875 2.3183594,9.4257812 5.5,12.607422 8.6816406,9.4257812 7.9746094,8.71875 6,10.693359 6,2 5,2 Z m 5,0 0,1 5,0 0,-1 -5,0 z m 0,3 0,1 5,0 0,-1 -5,0 z m 0,3 0,1 5,0 0,-1 -5,0 z m 0,3 0,1 5,0 0,-1 -5,0 z m -8,3 0,1 13,0 0,-1 -13,0 z' color='%23000' font-family='sans-serif' font-weight='400' overflow='visible' transform='translate(4 1031.362)' style='line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal'/%3E%3C/g%3E%3C/svg%3E"; var sendBackImg = document.createElement('img'); sendBackImg.src = sendBackIcon; function sendBackObject(eventData, transform) { var target = transform.target; target.moveTo(0); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); } function renderBackIcon(ctx, left, top, styleOverride, fabricObject) { var size = 25; ctx.save(); ctx.translate(left, top); ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); ctx.drawImage(sendBackImg, -size/2, -size/2, size, size); ctx.restore(); } /* Wait for the images are fully loaded / var init = function() { c = selector.find('.tm-caps-canvas')[0]; img = selector.find('.tm-caps-img')[0]; imgurl = selector.find('.tm-caps-img').attr('src'); selector.find('.tm-caps-canvas').attr('width', img.width); selector.find('.tm-caps-canvas').attr('height', img.height); fabric.enableGLFiltering = false; canvas = new fabric.Canvas(c); canvas.freeDrawingBrush.color = settings.lineColor; canvas.freeDrawingBrush.width = settings.lineWidth; fabric.Image.fromURL(imgurl, function(img) { canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), { scaleX: canvas.width / img.width, scaleY: canvas.height / img.height }); }); // Default Text text = new fabric.Textbox(selector.data('default'),{ width: canvas.width - 40, top: 20, left: 20, fontSize: settings.fontSize, fontFamily: settings.fontFamily, fontWeight: settings.fontWeight, fontStyle: settings.fontStyle, lineHeight: settings.lineHeight, fill: settings.fill, stroke: settings.stroke, strokeWidth: settings.strokeWidth, textBackgroundColor: settings.textBackgroundColor, textAlign: settings.textAlign, isTextObject: true, isDeletable: false }); canvas.add(text); canvas.setActiveObject(text); // Create add text control text.controls.addTextControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: addObject, render: renderAddIcon, cornerSize: 25 }); // Create send front control text.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control text.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control text.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 90, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); // Watermark if (selector.data('watermark')) { watermark = new fabric.Textbox(' ' + selector.data('watermark') + ' ',{ width: canvas.width, left: 0, fontSize: settings.WfontSize, lineHeight: settings.lineHeight, fontFamily: settings.WfontFamily, fontWeight: settings.WfontWeight, fontStyle: settings.WfontStyle, fill: settings.Wfill, stroke: settings.Wstroke, strokeWidth: settings.WstrokeWidth, textBackgroundColor: settings.WtextBackgroundColor, textAlign: settings.WtextAlign, selectable: false, hoverCursor: 'inherit', editable: false, isTextObject: true, isDeletable: false }); canvas.add(watermark); canvas.setActiveObject(watermark); watermark.top = canvas.height - watermark.height; watermark.moveTo(999); } // Remove Loader selector.find('.tm-caps-loader-wrapper').fadeOut(200); }; // Wait for the placeholder image fully load selector.find('.tm-caps-img-wrapper').imagesLoaded( function() { init(); // Text Color Colorpicker picker1 = new Picker({ parent: selector.find('.tm-caps-text-color')[0], color: settings.fill, popup: 'left', onChange: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } selector.find('.tm-caps-text-color').css('background-color', color.rgbaString); objects.filter(element => element.editable === true).forEach(element => element.set("fill", color.rgbaString)); canvas.requestRenderAll(); }, onOpen: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.editable === true).forEach(element => element.set("fill", color.rgbaString)); canvas.requestRenderAll(); }, }); // Stroke Color Colorpicker picker2 = new Picker({ parent: selector.find('.tm-caps-stroke-color')[0], color: settings.stroke, popup: 'left', onChange: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } selector.find('.tm-caps-stroke-color').css('background-color', color.rgbaString); objects.filter(element => element.editable === true).forEach(element => element.set("stroke", color.rgbaString)); canvas.requestRenderAll(); }, onOpen: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.editable === true).forEach(element => element.set("stroke", color.rgbaString)); canvas.requestRenderAll(); }, }); // Text Background Colorpicker picker3 = new Picker({ parent: selector.find('.tm-caps-textbg-color')[0], color: settings.textBackgroundColor, popup: 'left', onChange: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } selector.find('.tm-caps-textbg-color').css('background-color', color.rgbaString); objects.filter(element => element.editable === true).forEach(element => element.set("textBackgroundColor", color.rgbaString)); canvas.requestRenderAll(); }, onOpen: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.editable === true).forEach(element => element.set("textBackgroundColor", color.rgbaString)); canvas.requestRenderAll(); }, }); // Line Color Colorpicker picker4 = new Picker({ parent: selector.find('.tm-caps-line-color')[0], color: settings.lineColor, popup: 'left', onChange: function(color) { canvas.freeDrawingBrush.color = color.rgbaString; selector.find('.tm-caps-line-color').css('background-color', color.rgbaString); canvas.requestRenderAll(); }, }); // Shape Color Colorpicker picker5 = new Picker({ parent: selector.find('.tm-caps-shape-color')[0], color: settings.shapeColor, popup: 'left', onChange: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } selector.find('.tm-caps-shape-color').css('background-color', color.rgbaString); objects.filter(element => element.isShape === true).forEach(element => element.set("fill", color.rgbaString)); canvas.requestRenderAll(); }, onOpen: function(color) { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.isShape === true).forEach(element => element.set("fill", color.rgbaString)); canvas.requestRenderAll(); }, }); }); // Download Button selector.find('.tm-caps-download').on('click', function () { var link = document.createElement("a"); var imgData = canvas.toDataURL({ format: 'png', enableRetinaScaling: settings.enableRetinaScaling}); var blob = dataURLtoBlob(imgData); var objurl = URL.createObjectURL(blob); link.download = new Date().getTime() + '.png'; link.href = objurl; link.click(); }); // Upload Button selector.find('#tm-caps-file').on('change', function () { canvas.clear(); resetControls(); var reader = new FileReader(); reader.onload = function(ev) { selector.find('.tm-caps-img').attr('src', reader.result); }; reader.readAsDataURL(this.files[0]); setTimeout(function(){ selector.find('.tm-caps-img-wrapper').imagesLoaded( function() { init(); var tempcont = selector.find('.canvas-container > .canvas-container').parent('.canvas-container'); tempcont.children('.tm-caps-canvas').remove(); selector.find('.canvas-container > .canvas-container').unwrap(); }); }, 100); }); // Select Template Button selector.find('.tm-caps-select-template').on('click', function () { if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).find('i').attr('class', templateIcon); selector.find('.tm-caps-gallery').fadeOut(200); } else { selector.find('.tm-caps-draw.active').trigger('click'); selector.find('.tm-caps-add-emoji.active').trigger('click'); selector.find('.tm-caps-add-shape.active').trigger('click'); $(this).addClass('active'); $(this).find('i').attr('class', 'fas fa-times'); selector.find('.tm-caps-gallery').fadeIn(200); } }); // Select Template Thumbnails selector.find('.tm-caps-gallery-item').on('click', function () { selector.find('.tm-caps-loader-wrapper').fadeIn(200); canvas.clear(); resetControls(); var newimg = $(this).data('largeimg'); selector.find('.tm-caps-img').attr('src', newimg); selector.find('.tm-caps-img-wrapper').imagesLoaded( function() { init(); var tempcont = selector.find('.canvas-container > .canvas-container').parent('.canvas-container'); tempcont.children('.tm-caps-canvas').remove(); selector.find('.canvas-container > .canvas-container').unwrap(); selector.find('.tm-caps-select-template').removeClass('active'); selector.find('.tm-caps-select-template').find('i').attr('class', templateIcon); selector.find('.tm-caps-gallery').hide(); selector.find('.tm-caps-loader-wrapper').fadeOut(200); }); }); // Add Emoji Button selector.find('.tm-caps-add-emoji').on('click', function () { if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).find('i').attr('class', emojiIcon); selector.find('.tm-caps-emoji').fadeOut(200); } else { selector.find('.tm-caps-draw.active').trigger('click'); selector.find('.tm-caps-add-shape.active').trigger('click'); selector.find('.tm-caps-select-template.active').trigger('click'); $(this).addClass('active'); $(this).find('i').attr('class', 'fas fa-times'); selector.find('.tm-caps-emoji').fadeIn(200); } }); // Select Emoji selector.find('.tm-caps-emoji-item').on('click', function () { fabric.loadSVGFromURL($(this).find('img').attr('src'),function(objects, options){ emoji = fabric.util.groupSVGElements(objects, options); emoji.set('originX', 'center'); emoji.set('originY', 'center'); emoji.set('left', 0.5 canvas.width); emoji.set('top', 0.5 * canvas.height); emoji.set('isDeletable', true); emoji.set('isTextObject', true); emoji.scaleToWidth(100); emoji.scaleToHeight(100); canvas.add(emoji); // Create send front control emoji.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control emoji.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control emoji.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); }); selector.find('.tm-caps-add-emoji').removeClass('active'); selector.find('.tm-caps-add-emoji').find('i').attr('class', emojiIcon); selector.find('.tm-caps-emoji').fadeOut(200); }); // Draw Mode Button selector.find('.tm-caps-draw').on('click', function () { if($(this).hasClass('active')) { canvas.isDrawingMode = false; $(this).removeClass('active'); selector.find('.tm-caps-text-controls').show(); selector.find('.tm-caps-slider-controls').show(); selector.find('.tm-caps-draw-controls').hide(); $(this).find('i').attr('class', drawIcon); canvas.forEachObject(function(obj) { if(obj.isTextObject !== true) { obj.set('isDeletable', true); obj.moveTo(0); // Create send front control obj.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control obj.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control obj.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); } }); } else { canvas.isDrawingMode = true; $(this).addClass('active'); selector.find('.tm-caps-add-emoji.active').trigger('click'); selector.find('.tm-caps-add-shape.active').trigger('click'); selector.find('.tm-caps-select-template.active').trigger('click'); selector.find('.tm-caps-text-controls').hide(); selector.find('.tm-caps-slider-controls').hide(); selector.find('.tm-caps-draw-controls').show(); $(this).find('i').attr('class', 'fas fa-times'); } }); // Clear Canvas Button selector.find('.tm-caps-reset').on('click', function () { canvas.clear(); resetControls(); selector.find('.tm-caps-draw.active').trigger('click'); selector.find('.tm-caps-add-emoji.active').trigger('click'); selector.find('.tm-caps-add-shape.active').trigger('click'); selector.find('.tm-caps-select-template.active').trigger('click'); setTimeout(function(){ init(); var tempcont = selector.find('.canvas-container > .canvas-container').parent('.canvas-container'); tempcont.children('.tm-caps-canvas').remove(); selector.find('.canvas-container > .canvas-container').unwrap(); }, 100); }); // Delete Drawings Button selector.find('.tm-caps-delete-drawings').on('click', function () { canvas.forEachObject(function(obj) { if(obj.isTextObject !== true) { canvas.remove(obj); } canvas.requestRenderAll(); }); }); // Add Shapes Button selector.find('.tm-caps-add-shape').on('click', function () { if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).find('i').attr('class', shapeIcon); selector.find('.tm-caps-text-controls').show(); selector.find('.tm-caps-slider-controls').show(); selector.find('.tm-caps-shape-controls').hide(); } else { selector.find('.tm-caps-draw.active').trigger('click'); selector.find('.tm-caps-add-emoji.active').trigger('click'); selector.find('.tm-caps-select-template.active').trigger('click'); $(this).addClass('active'); $(this).find('i').attr('class', 'fas fa-times'); selector.find('.tm-caps-text-controls').hide(); selector.find('.tm-caps-slider-controls').hide(); selector.find('.tm-caps-shape-controls').show(); } }); // Add Rectangle Button selector.find('.tm-caps-add-rect').on('click', function () { rect = new fabric.Rect(); rect.set('width', 200); rect.set('height', 150); rect.set('originX', 'center'); rect.set('originY', 'center'); rect.set('fill', selector.find('.tm-caps-shape-color').css('background-color')); rect.set('left', 0.5 * canvas.width); rect.set('top', 0.5 * canvas.height); rect.set('isDeletable', true); rect.set('isTextObject', true); rect.set('isDeletable', true); rect.set('isShape', true); // Create send front control rect.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control rect.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control rect.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); canvas.add(rect); canvas.setActiveObject(rect); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); }); // Add Circle Button selector.find('.tm-caps-add-circle').on('click', function () { circle = new fabric.Circle(); circle.set('width', 150); circle.set('height', 150); circle.set('radius', 50); circle.set('originX', 'center'); circle.set('originY', 'center'); circle.set('fill', selector.find('.tm-caps-shape-color').css('background-color')); circle.set('left', 0.5 * canvas.width); circle.set('top', 0.5 * canvas.height); circle.set('isDeletable', true); circle.set('isTextObject', true); circle.set('isDeletable', true); circle.set('isShape', true); // Create send front control circle.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control circle.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control circle.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); canvas.add(circle); canvas.setActiveObject(circle); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); }); // Add Triangle Button selector.find('.tm-caps-add-triangle').on('click', function () { triangle = new fabric.Triangle(); triangle.set('width', 150); triangle.set('height', 150); triangle.set('originX', 'center'); triangle.set('originY', 'center'); triangle.set('fill', selector.find('.tm-caps-shape-color').css('background-color')); triangle.set('left', 0.5 * canvas.width); triangle.set('top', 0.5 * canvas.height); triangle.set('isDeletable', true); triangle.set('isTextObject', true); triangle.set('isDeletable', true); triangle.set('isShape', true); // Create send front control triangle.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control triangle.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control triangle.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); canvas.add(triangle); canvas.setActiveObject(triangle); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); }); // Upload SVG Button selector.find('#tm-caps-file2').on('change', function () { var reader = new FileReader(); reader.onload = function(ev) { svgImg = reader.result; }; reader.readAsDataURL(this.files[0]); setTimeout(function(){ fabric.loadSVGFromURL(svgImg,function(objects, options){ svg = fabric.util.groupSVGElements(objects, options); svg.set('originX', 'center'); svg.set('originY', 'center'); svg.set('left', 0.5 * canvas.width); svg.set('top', 0.5 * canvas.height); svg.set('isDeletable', true); svg.set('isTextObject', true); svg.scaleToWidth(100); svg.scaleToHeight(100); canvas.add(svg); // Create send front control svg.controls.frontControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 0, cursorStyle: 'pointer', mouseUpHandler: sendFrontObject, render: renderFrontIcon, cornerSize: 25 }); // Create send back control svg.controls.backControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 30, cursorStyle: 'pointer', mouseUpHandler: sendBackObject, render: renderBackIcon, cornerSize: 25 }); // Create delete control svg.controls.deleteControl = new fabric.Control({ x: 0, y: 0.5, offsetY: 28, offsetX: 60, cursorStyle: 'pointer', mouseUpHandler: deleteObject, render: renderIcon, cornerSize: 25 }); if (selector.data('watermark')) { watermark.moveTo(999); } canvas.requestRenderAll(); }); }, 100); }); // Bold button selector.find('.tm-caps-btn-bold').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if ($(this).hasClass('active')) { $(this).removeClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("fontWeight", 'normal')); } else { $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("fontWeight", 'bold')); } canvas.requestRenderAll(); }); // Italic button selector.find('.tm-caps-btn-italic').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if ($(this).hasClass('active')) { $(this).removeClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("fontStyle", 'normal')); } else { $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("fontStyle", 'italic')); } canvas.requestRenderAll(); }); // Underline button selector.find('.tm-caps-btn-underline').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if ($(this).hasClass('active')) { $(this).removeClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("underline", false)); } else { $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("underline", true)); } canvas.requestRenderAll(); }); // Left align button selector.find('.tm-caps-btn-left-align').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if (!$(this).hasClass('active')) { selector.find('.tm-caps-btn-right-align').removeClass('active'); selector.find('.tm-caps-btn-justify').removeClass('active'); selector.find('.tm-caps-btn-center').removeClass('active'); $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("textAlign", 'left')); } canvas.requestRenderAll(); }); // Justify button selector.find('.tm-caps-btn-justify').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if (!$(this).hasClass('active')) { selector.find('.tm-caps-btn-left-align').removeClass('active'); selector.find('.tm-caps-btn-right-align').removeClass('active'); selector.find('.tm-caps-btn-center').removeClass('active'); $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("textAlign", 'justify')); } canvas.requestRenderAll(); }); // Center button selector.find('.tm-caps-btn-center').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if (!$(this).hasClass('active')) { selector.find('.tm-caps-btn-left-align').removeClass('active'); selector.find('.tm-caps-btn-right-align').removeClass('active'); selector.find('.tm-caps-btn-justify').removeClass('active'); $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("textAlign", 'center')); } canvas.requestRenderAll(); }); // Right align button selector.find('.tm-caps-btn-right-align').on('click', function () { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } if (!$(this).hasClass('active')) { selector.find('.tm-caps-btn-left-align').removeClass('active'); selector.find('.tm-caps-btn-justify').removeClass('active'); selector.find('.tm-caps-btn-center').removeClass('active'); $(this).addClass('active'); objects.filter(element => element.editable === true).forEach(element => element.set("textAlign", 'right')); } canvas.requestRenderAll(); }); // Font Select selector.find('.tm-caps-select-fonts').on('change', function() { var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.editable === true).forEach(element => element.set("fontFamily", $(this).val())); canvas.requestRenderAll(); }); // Image Filter Select selector.find('.tm-caps-select-filters').on('change', function() { if ($(this).val() === 'sepia') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Sepia()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'blackwhite') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.BlackWhite()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'brownie') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Brownie()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'vintage') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Vintage()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'kodachrome') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Kodachrome()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'technicolor') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Technicolor()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'polaroid') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Polaroid()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'invert') { canvas.backgroundImage.filters = []; canvas.backgroundImage.filters.push(new fabric.Image.filters.Invert()); canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } else if ($(this).val() === 'nofilter') { canvas.backgroundImage.filters = []; canvas.backgroundImage.applyFilters(); canvas.requestRenderAll(); } }); // Zoom selector.find('.tm-caps-zoom').on('input', function() { selector.find('span.tm-count-zoom').html($(this).val()); selector.find('.tm-caps-wrapper').css('max-width', $(this).val() + '%'); resizeCanvas(canvas); canvas.requestRenderAll(); }); // Font Size selector.find('.tm-caps-text-size').on('input click', function() { selector.find('span.tm-count-text-size').html($(this).val()); var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.editable === true).forEach(element => element.set("fontSize", parseInt($(this).val()))); canvas.requestRenderAll(); }); // Stroke Size selector.find('.tm-caps-stroke-size').on('input click', function() { selector.find('span.tm-count-stroke-size').html($(this).val()); var objects = canvas.getActiveObjects(); if (objects.length === 0) { objects = canvas.getObjects(); } objects.filter(element => element.editable === true).forEach(element => element.set("strokeWidth", parseInt($(this).val()))); canvas.requestRenderAll(); }); // Line Size selector.find('.tm-caps-line-width').on('input', function() { selector.find('span.tm-count-line-width').html($(this).val()); canvas.freeDrawingBrush.width = parseInt($(this).val()); canvas.requestRenderAll(); }); // Window Resize $(window).on('resize orientationchange', function(){ resizeCanvas(canvas); }); }; })(jQuery);

| ver. 1.4 | Github | . | PHP 8.1.32 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ� Ñ�Ñ‚Ñ€Ð°Ð½Ð¸Ñ†Ñ‹: 0 | proxy | phpinfo | Ð�Ð°Ñ�Ñ‚Ñ€Ð¾Ð¹ÐºÐ°