通过img标签获取heic图片并转为img

在HTML中，如果你想显示HEIC（High Efficiency Image Coding，高效图像编码）格式的图片，通常浏览器本身并不直接支持HEIC，因为它是苹果自家的图片格式，主要用于iOS设备。不过，可以借助一些JavaScript库或者服务来实现这个转换过程。

1. **使用JavaScript库**：例如`html2canvas`库可以将整个网页截图（包括HEIC图片），然后你可以将其转换为常见的PNG或JPEG格式。首先需要在HTML页面中引用该库，并在适当的时候调用它的转换函数：

// 引入html2canvas库
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0/html2canvas.min.js"></script>

// 获取img元素
var imgElement = document.getElementById('your-heic-image');

// 将HEIC转换
html2canvas(imgElement).then(function(canvas) {
  // 将canvas内容转为DataURL
  var dataURL = canvas.toDataURL();
  // 使用dataURL创建新的img元素展示图片
  var newImg = document.createElement('img');
  newImg.src = dataURL;
  document.body.appendChild(newImg);
});

2. **云服务API**：像Google Cloud、AWS等云服务商提供图片处理API，可以直接上传HEIC图片并返回转换后的文件链接，你只需要在前端发起请求即可。示例代码（假设使用axios库）：

axios.post('https://api.example.com/convertHeic', { image: imgElement.src })
  .then(response => {
    const convertedImageSrc = response.data.url; // 转换后的图片URL
    // 加载新图片
    var newImg = document.createElement('img');
    newImg.src = convertedImageSrc;
    document.body.appendChild(newImg);
  });

请注意，实际操作时可能需要处理跨域问题，以及确保你有权使用这些转换服务。