浏览器是否支持 JavaScript 函数？ 另一个好处

问题描述

我有一个函数，它将图像作为输入并将其返回为 200 x 200 大小。 它正在 Chrome 上的本地平台上运行。但不能通过 codepen 网站在 Safari 上工作。

https://codepen.io/sbrakeshrath/pen/PoprEqP?editors=1011

我不知道为什么。

老实说，我的朋友是这么说的，但我无法测试，因为我没有 Mac 设备。

你能看看我的代码并说说它有什么问题以及浏览器对整个代码的支持吗？

另一个好处

你能说我是按照正确的方式做的还是有其他可能性？

const Pro_pic = document.querySelector("img");
// console.log(Pro_pic);



function changeProfilePic(e,Pro_pic,form) {
  console.log("hallo");
  const pic_dim = {
    w: 250,h: 250,};
  const imgIn = document.createElement("input");
  imgIn.type = "file";
  imgIn.accept = "image/*";
  imgIn.addEventListener("change",(e) => {
    const file = e.target.files[0];
    const objUrl = URL.createObjectURL(file);
    var img = new Image();
    img.src = objUrl;
    img.onload = (e) => {
      const ratio = {
        h: img.height / img.width,v: img.width / img.height,};

      // canvas element

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = pic_dim.w;
      canvas.height = pic_dim.h;
      const newImfDim = {
        w: 0,h: 0,};

      if (ratio.v < 1) {
        newImfDim.w = pic_dim.w;
        newImfDim.h = pic_dim.h / ratio.v;
      } else {
        newImfDim.w = pic_dim.w / ratio.h;
        newImfDim.h = pic_dim.h;
      }

      console.log(newImfDim);
      canvas.style.margin = "20px 20px";
      ctx.drawImage(
        img,-(newImfDim.w - pic_dim.w) / 2,-(newImfDim.h - pic_dim.h) / 2,newImfDim.w,newImfDim.h
      );

      Pro_pic.src = canvas.toDataURL();
      form.insertBefore(canvas,form.firstChild);
    };
  });
  imgIn.click();
}

function clicked(e){
  changeProfilePic(e,document.body);
}

<img src= "" />
<button onclick = "clicked(event)"> click to change pic</button>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）