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;
          }
    正道的光终将来临,当太阳升起的时候,光芒总会普照大地温暖人间。些许的阴霾也终会有被阳光洒满的一天
  • 相关阅读:
    如何保持页脚始终在页面底部
    CSS自适应宽度圆角按钮
    ACM1004
    java输出格式
    北大ACM1001题Exponentiation(求高精度幂)
    深入理解sizeof
    java之类BigDecimal
    ACM1003
    ACM1005
    C的输出格式printf
  • 原文地址:https://www.cnblogs.com/sjruxe/p/14335911.html
Copyright © 2011-2022 走看看