vue 通过路径下载图片

最新推荐文章于 2024-07-09 15:15:21 发布

hacllker

最新推荐文章于 2024-07-09 15:15:21 发布

阅读量983

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44745401/article/details/131589975

版权

该文章介绍了一个Vue的全局方法，用于从给定的URL下载图片。方法中，创建一个新的Image对象，设置crossOrigin属性，加载图片后绘制到canvas上，然后转换为Blob对象并生成下载链接，最终模拟点击下载。

摘要由CSDN通过智能技术生成

/**
 * 
 * @param {*} url // 图片路径
 * @param {*} name // 图片名称
 */
Vue.prototype.imagesDownload = function (url, name) {
  let image = new Image()
  image.setAttribute("crossOrigin", "anonymous");
  image.src = url;
  image.onload = () => {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, image.width, image.height);
    canvas.toBlob((blob) => {
      let href = URL.createObjectURL(blob);
      let Link = document.createElement("a");
      Link.download = name;
      Link.href = href;
      Link.click();
      Link.remove();
      // 用完释放URL对象
      URL.revokeObjectURL(href);
    });
  };
}