1. Carregue sua foto
2. Escolha o seu tema
3. Ajuste a sua foto
Tamanho da imagem:
Arraste para reposicionar
4. Salve sua foto
var moving = false var c = $("#myCanvas"); var ctx = document.getElementById("myCanvas").getContext("2d"); var image = document.createElement("img"); var moldura1 = document.createElement("img"); var moldura2 = document.createElement("img"); moldura1.src = "|!|vcvUploadUrl|!|/2024/11/modelo-1-1.png"; moldura2.src = "|!|vcvUploadUrl|!|/2024/11/modelo-2-1.png"; var imageTransform = {x: 25, y: 25, scale: 1.0}; var startOffset = {x: 0, y:0 }; var sizeInput = document.getElementById("imageSize"); var temaSelecionado = 1;
/*$(document).ready(function(){ $("#myCanvas").css("position", "absolute"); $("#myCanvas").css("transform", "translate(-25%, -25%) scale(0.5)");
});*/
$("#op1").change(function(){changeMoldura(1)}); $("#op2").change(function(){changeMoldura(2)}); $("#downloadButton").click(function(){ var link = document.createElement('a'); link.download = 'foto-perfil-duarte.png'; link.href = document.getElementById('myCanvas').toDataURL() link.click(); }); function changeMoldura(value) { temaSelecionado = value }
function previewFile() { //var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader();
reader.onloadend = function () { image.src = reader.result; const originalWidth = image.width; const newHeight = newHeight * (1500/originalWidth); image.width = 1500; image.height = newHeight; }
if (file) { reader.readAsDataURL(file); } else { image.src = ""; } $("#sizeGroup").show(); }
c.mousedown(function(e){startDragging(e, false)}); c.mousemove(function(e) {drag(e, false)}); c.mouseup(function(){ moving = false; $("body").css("overflow", "auto"); }); c.on("touchstart", function(e){ startDragging(e, true) }); c.on ("touchmove", function(e){ drag(e, true) }); c.on("touchend", function(){ moving = false; $("body").css("overflow", "auto"); });
var startDragging = function(e, isTouch) { moving = true; $("body").css("overflow", "hidden"); var rect = e.target.getBoundingClientRect(); var x = 0; var y = 0; if(!isTouch) { x = e.clientX - rect.left; y = e.clientY - rect.top; } else { x = e.touches[0].clientX - rect.left; y = e.touches[0].clientY - rect.top; } startOffset.x = x - imageTransform.x; startOffset.y = y - imageTransform.y; console.log("x: " + x + " | y: "+y) }
var drag = function(e, isTouch) { if(moving) { var rect = e.target.getBoundingClientRect(); var x = 0; var y = 0; if(!isTouch) { x = e.clientX - rect.left; y = e.clientY - rect.top; } else { x = e.touches[0].clientX - rect.left; y = e.touches[0].clientY - rect.top; } imageTransform.x = x - startOffset.x; imageTransform.y = y - startOffset.y; } }
setInterval(render,0.1)
function render() { imageTransform.scale = sizeInput.value; ctx.clearRect(0, 0, c[0].width, c[0].height); ctx.drawImage(image,imageTransform.x, imageTransform.y, image.width * imageTransform.scale, image.height * imageTransform.scale); var finalMoldura = temaSelecionado == 1 ? moldura1 : moldura2; ctx.drawImage(finalMoldura, 0, 0, 1000, 1000) }