存入LocalStorage的图片读取时被裁剪，设置object-fit无效如何解决

你遇到的裁剪问题根源是存入LocalStorage前的图片转base64逻辑存在多处错误，图片在存储阶段就已经被裁剪/损坏，后续CSS配置自然不会生效，具体错误点和修复方案如下：

具体错误点 #

• 错误1：临时创建的图片元素未等待加载完成就直接转base64。给img设置src后图片是异步加载的，未加载完成时读取宽高、绘制canvas都会得到异常结果。
• 错误2：硬设临时图片元素宽高为200px*200px，canvas绘制时直接用该尺寸，原图如果不是正方形，绘制阶段就会被强制裁剪/拉伸。
• 错误3：转base64时删除了dataURL的标识前缀，读取时直接赋值给img的src属性，浏览器无法识别为合法的base64图片资源。

修复方案 #

1. 调整事件回调逻辑，传递事件对象避免兼容性问题
2. 新增图片加载完成的回调，等图片资源完全加载后再执行转base64操作
3. 绘制canvas时使用图片原始宽高（naturalWidth/naturalHeight），保留原图比例和完整内容
4. 存储完整的base64 dataURL，无需删除前缀，降低读取时的处理成本

修复后核心代码 #

var imageTouch = Array.from(document.getElementsByClassName("img"));
imageTouch.forEach(function (element) {
  element.addEventListener("touchstart", onlyTouch, false);
  element.addEventListener("click", onlyClick, false);
});

function onlyTouch(ev) {
  ev.preventDefault();
  TouchFun(ev);
}

function onlyClick(ev) {
  ev.preventDefault();
  TouchFun(ev);
}

function TouchFun(ev) {
  if (confirm("Do You want to save this image?")) {
    var target = ev.target;
    var imageSel = target.src;
    var myNewElement = document.createElement("img");
    myNewElement.setAttribute("crossorigin", "anonymous");
    // 加载完成后再转base64
    myNewElement.onload = function() {
      localStorage.setItem("image", getBase64Image(myNewElement));
    }
    myNewElement.src = imageSel;
  } else {
    console.log("cancel");
  }
}

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  // 用图片原始宽高，保证内容完整
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  // 导出完整base64，保留前缀
  return canvas.toDataURL("image/jpeg", 0.9);
}

读取逻辑无需修改，直接使用原有代码即可。修复后存储的是完整未裁剪的原图资源，渲染时配置的object-fit属性会正常生效。

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