Estoy tratando de escribir una función de herramienta de sello que pueda cargar una imagen como sello. Desafortunadamente, no puedo escalar la imagen al tamaño de un sello. Por ejemplo. la imagen sigue siendo del tamaño original pero el tamaño del sello es de 50x50. Por lo tanto, el sello solo puede mostrar la esquina superior izquierda de la imagen.
Intenté usar la función de tamaño o cambio de tamaño en P5js pero no funciona.
Inicialicé una variable global llamada "sello" y el tamaño.
stamp = loadImage('./stamps/star.png'); this.size = 50;En la función de dibujo P5JS
image(stamp, mouseX, mouseY, this.size, this.size);En mi función handleFile
var handleFile = function (file) { print(file); if (file.type === 'image') { var targetStamp = createDiv(); targetStamp.class('stamps'); newStamp = createImg(file.data, '', () => { newStamp.size(100, AUTO) }); targetStamp.child(newStamp); stampSelector = select(".stampSelector"); stampSelector.child(targetStamp); targetStamp.mouseClicked(function () { var items = selectAll(".stamps"); for (var i = 0; i < items.length; i++) { items[i].style('border', '0') } targetStamp.style("border", "2px solid blue"); stamp = newStamp; }) } else { img = null; } }El tamaño se logró cambiar mediante CSS, pero no se puede usar como un sello. Cualquiera puede ayudar por favor.
Cuando dice "no se puede usar como sello", no está claro cuál es el problema. Con una versión simplificada de su código, generalmente parece funcionar. Sin embargo, parecería que hay un error con la forma en que la función image() maneja los elementos fuente <img> que han sido redimensionados (recorta la fuente al tamaño especificado, en lugar de usar las dimensiones originales de la imagen, incluso cuando especificas explícitamente dimensiones de la fuente). Sin embargo, hay una solución alternativa: usar una transformación CSS para controlar el tamaño del elemento <img> .
let img; let size = 50; function setup() { createCanvas(400, 400); let input = createFileInput(handleFile); input.position(10, 10); noLoop(); background(0); } function draw() {} function mouseClicked() { if (img) { image(img, mouseX, mouseY, size, size); } } function handleFile(file) { if (file.type === "image") { img = createImg(file.data, "uploaded image", "anonymous", () => { // This resizes the <img> tag, but will not effect the size of the image when drawn. // img.size(100, AUTO); img.style('transform', `scale(${100 / img.width})`); img.style('transform-origin', 'top left'); }); } else { img = null; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>