上传新图片时重置Zoom与Rotation值的技术实现问询

嘿，我看出来问题出在哪了——每次上传新图片时，之前调整过的缩放（Zoom）和旋转（Rotation）参数没被重置，导致新图片直接复用了旧的设置。别担心，只需要改几行代码就能解决：

具体修改步骤 #

找到代码里的container.loadImage方法，现在这个方法只重置了图片的位置参数，却漏掉了缩放和旋转。我们把这俩参数也重置回初始默认值就行：

原来的代码：

container.loadImage = function(imageUrl) {
    console.log("selected image, loading");
    settings.y = startY;
    settings.x = startX;
    prevX = prevY = 0;
    initImage = true;
    settings.image.src = imageUrl; // CHANGED
    // remove button
    return settings.id;
};

修改后的代码：

container.loadImage = function(imageUrl) {
    console.log("selected image, loading");
    settings.y = startY;
    settings.x = startX;
    // 重置缩放和旋转为初始默认状态
    settings.scale = 1; // 1代表无缩放，对应初始配置值
    settings.rotate = 0; // 0代表无旋转，对应初始配置值
    prevX = prevY = 0;
    initImage = true;
    settings.image.src = imageUrl; // CHANGED
    // remove button
    return settings.id;
};

原理说明 #

在你的代码默认配置里，scale初始值是1（没有缩放），rotate初始值是0（没有旋转），完全符合你“重置为初始默认值”的需求。每次加载新图片时强制恢复这两个参数，新图片就不会带着旧图片的调整痕迹，会以原始大小和角度显示在遮罩的默认位置。

而且你不用操心后续的绘制逻辑，因为drawImage方法会自动使用重置后的参数来计算图片的居中位置，完美适配新图片。

这样改完之后，再上传新图片就不会有旧参数残留的问题啦！

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