P5JS中如何对上传的图片进行缩放

Question

我正在尝试编写一个可以将图像作为图章上传的图章工具功能。不幸的是，我无法将图像缩放为邮票尺寸。例如。图像保持原始尺寸，但邮票尺寸为 50x50。因此，图章只能显示图像的左上角。

我尝试在 P5js 中使用大小或调整大小功能，但它不起作用。

我初始化了一个名为“stamp”的全局变量和大小。

    stamp = loadImage('./stamps/star.png');
    this.size = 50;

在P5JS绘制函数中

    image(stamp, mouseX, mouseY, this.size, this.size);

在我的 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;
    }
}

CSS成功更改大小，但不能作为图章使用。任何人都可以提供帮助。

Answer 1

当您说“不能用作邮票”时，不清楚是什么问题。使用简化版本的代码，它通常似乎可以工作。但是，image() 函数处理已调整大小的源 <img> 元素的方式似乎存在错误（它将源裁剪为指定大小，而不是使用原始图像尺寸，即使当您明确指定源维度时）。不过有一个解决方法：使用 CSS 转换来控制 <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>

P5JS中如何对上传的图片进行缩放

How to scale the uploaded image in P5JS

javascript

p5.js