下载图片到本地vue3-ts

最新推荐文章于 2024-05-06 13:52:52 发布

Mr.ninglixin

最新推荐文章于 2024-05-06 13:52:52 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46572329/article/details/125515316

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

const useDownloadImage = () => {
  const downloadImage = async (imgsrc:any, name:any) => { // 下载图片地址和图片名
    const image = new Image();
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      // @ts-ignore
      context.drawImage(image, 0, 0, image.width, image.height);
      const url = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      const event = new MouseEvent('click');
      a.download = name || 'photo';
      a.href = url;
      a.dispatchEvent(event);
    };
    image.src = imgsrc;
  };
  return {
    downloadImage,
  };
};

export default useDownloadImage;