zoukankan      html  css  js  c++  java
  • 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;
          }
    

      

  • 相关阅读:
    python分析文本文件/json
    python中文件操作
    python异常处理
    socket网络模块
    层模型--固定定位
    层模型--相对定位
    层模型--绝对定位
    什么是层模型?
    浮动模型
    流动模型/a标签换行问题
  • 原文地址:https://www.cnblogs.com/bomdeyada/p/10839022.html
Copyright © 2011-2022 走看看