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

如何解决浏览器是否支持 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>