• vue实现点击按钮下载图片


    最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题,

    可以直接用创建canvas方法:

    定义图片地址Img: "www.xxxxx.com/xxx/xxx/xx.jpg"
    
    点击事件:
    downloadCodeImg() {
            var image = new Image();
            image.setAttribute("crossOrigin", "anonymous");
            var _this = this;
            image.onload = function () {
              var canvas = document.createElement("canvas");
              canvas.width = image.width;
              canvas.height = image.height;
              var context = canvas.getContext("2d");
              context.drawImage(image, 0, 0, image.width, image.height);
              var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
              var a = document.createElement("a"); // 生成一个a元素
              var event = new MouseEvent("click"); // 创建一个单击事件
              a.download = _this.projectName || "photo"; // 设置图片名称
              a.href = url; // 将生成的URL设置为a.href属性
              a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = this.Img;
          }
    正道的光终将来临,当太阳升起的时候,光芒总会普照大地温暖人间。些许的阴霾也终会有被阳光洒满的一天
  • 相关阅读:
    Google是如何赚钱的?
    网站数据连接
    表单验证
    Web Proxy Autodiscovery Protocol
    把SQL2000的数据库迁移至SQL2005
    WFE与Index服务器之前的通讯
    SOS 的帮助输出
    WinDbg.exe中使用的SOS.dll的命令列表
    HTTPS 简介
    Error: A web configuration modification operation is already running
  • 原文地址:https://www.cnblogs.com/sjruxe/p/14335911.html
Copyright © 2020-2023  润新知