javascript - LocalStorage 正在裁剪输出图像

问题描述

这是我的第一次我的第一次。我需要帮助！我将某个图像大小保存到 localStorage，当我想取回它时，它被裁剪了。我怎样才能停止种植？我试过用 CSS object-fit:cover, object-fit:contain, 没用。

这是我的代码：

我保存到 localStorage 的图像：

li img {
        display: block;
        text-align: center;
        padding: 14px 16px;
      }
      img {
        width: 120px;
        height: 120px;
      }
<li><img
              src="https://res.cloudinary.com/zestarla/image/upload/v1631394114/Trial/IMG_4976_tm7n8t.jpg"
              class="img"
              id="image47"
            /></li>

javascript函数：

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

      function onlyTouch(ev) {
        //console.log("Here a touchstart event is triggered");
        ev.preventDefault();
        TouchFun();
      }

      imageTouch.forEach(function (element) {
        element.addEventListener("click", onlyClick, false);
      });

      function onlyClick(ev) {
        //console.log("Here a click event is triggered");
        ev.preventDefault();
        TouchFun();
      }

      function TouchFun() {
        if (confirm("Do You want to save this image?")) {
          var target = event.target;
          imageSel = target.src;
          var myNewElement = document.createElement("img");
          myNewElement.src = imageSel;
          myNewElement.setAttribute("id", "selectedImage");
          myNewElement.setAttribute("crossorigin", "anonymous");
          myNewElement.setAttribute("width", "200px");
          myNewElement.setAttribute("height", "200px");
          //console.log(myNewElement);
          //var baseImage = getBase64Image(myNewElement.src);
          localStorage.setItem("image", getBase64Image(myNewElement));
          //console.log(baseImage);
        } else {
          console.log("cancel");
        }
      }
      

      function getBase64Image(img) {
        // Create an empty canvas element
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        // Copy the image contents to the canvas
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var dataURL = canvas.toDataURL("image/jpg");

        return dataURL.replace(/^data:image\/(jpg);base64,/, "");
      }

用于查看图像的 JavaScript 函数：

        const recentImageDataUrl = localStorage.getItem("image");
        if (recentImageDataUrl) {
          document
            .querySelector("#imageSaved")
            .setAttribute("src", recentImageDataUrl);
        }
      });

用于查看图像的 HTML 代码：

#imageArea img {
        margin: auto;
        max-width: none;
      }
 <div
            id="imageArea"
            class="col-sm-8 col-ls-10 col-md-9 col-xl-10 align-items-end"
          >
            <img src="" id="imageSaved" style="width:100%;height:100%;object-fit:cover;background-size: cover;"/>
          </div>

请问我做错了什么？不应裁剪此图像

标签： javascripthtmlcsslocal-storage

javascript - LocalStorage 正在裁剪输出图像

问题描述

解决方案

推荐阅读