我一眼就看出问题所在了——你在handleFile函数里把stamp赋值成了createImg创建的DOM图像元素（p5.Element），但最开始初始化的stamp是用loadImage得到的P5.Image对象，这两种类型的元素在image()函数里的行为完全不一样，这就是缩放失效的核心原因！

问题拆解 #

• 当你用loadImage加载图片时，得到的是P5JS专门处理的图像对象，image(stamp, x, y, w, h)能正确识别并应用宽高参数。
• 但createImg返回的是一个DOM <img>标签的包装对象，用它作为image()的参数时，P5JS只是把这个DOM元素渲染到画布上，此时你设置的宽高参数不会生效，它只会遵循DOM元素自身的样式（比如你用CSS设置的尺寸），这就导致你看到的印章只显示左上角区域。

修复方案 #

我们需要把上传的图片转换成P5.Image对象，同时保留预览选择的功能。修改你的handleFile函数如下：

var handleFile = function (file) {
  print(file);
  if (file.type === 'image') {
    // 1. 把上传的文件加载成P5.Image对象（这才是我们需要的印章源）
    loadImage(file.data, (loadedImage) => {
      // 2. 创建预览用的DOM图像（仅用于选择器展示）
      var targetStamp = createDiv();
      targetStamp.class('stamps');
      const previewImg = createImg(file.data, '', () => {
        previewImg.size(100, AUTO);
      });
      targetStamp.child(previewImg);
      stampSelector = select(".stampSelector");
      stampSelector.child(targetStamp);

      // 3. 点击选择时，把P5.Image对象赋值给stamp
      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 = loadedImage; // 关键：这里赋值的是P5.Image对象，不是DOM元素！
      });
    });
  } else {
    stamp = null;
  }
}

为什么这样能解决问题？ #

• 用loadImage(file.data)加载上传的文件，得到的是标准的P5.Image对象，和你最开始用loadImage('./stamps/star.png')得到的类型完全一致。
• 预览用的createImg只是给用户看选择项，实际印章绘制时用的是P5.Image对象，这样image(stamp, mouseX, mouseY, this.size, this.size)就能正常识别宽高参数，把图片缩放到50x50的尺寸了。

额外提示 #

• 如果你需要处理图片的缩放、裁剪等操作，也可以用P5JS的resize()方法（比如loadedImage.resize(this.size, this.size)）提前处理图片，但直接在image()里指定尺寸更灵活，适合动态调整印章大小的场景。
• 确保stamp变量始终是P5.Image类型，避免再次被DOM元素覆盖，这样后续的绘制逻辑就不会出问题。

内容的提问来源于stack exchange，提问作者jeremyf