js下载图片

   DownloadImgZP = imgPath => {
        const image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous');
        image.onload = function() {
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext('2d');
            context.drawImage(image, 0, 0, image.width, image.height);
            const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
            const a = document.createElement('a'); // 生成一个a元素
            const event = new MouseEvent('click'); // 创建一个单击事件
            a.download = 'img.png' || 'photo'; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgPath;
    };

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django|第一部

      注明的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层;他们之间以一种插件似的,松耦合的方式连接在一起.

    Wyc
  • 面向对象,二

               字段        静态字段(没一个对象都有一份),普通字段(每一个对象都不同的数据)

    Wyc
  • Python小列子-读取照片位置

    Python利用exifread库来解析照片的经纬度,对接百度地图API显示拍摄地点。

    Wyc
  • js 画布与图片的相互转化(canvas与img)

    //将图片对象转化为画布,返回画布 function ImageToCanvas(image) { var canvas = document.createE...

    lin_zone
  • Webpack02-配置文件的使用

    源码:https://gitee.com/andli/webpack_demo.git

    专注APP开发
  • MySQL information_schema详解 EVENTS

    该表提供有关event相关的信息,event在MySQL中为任务计划,即按照一定的频率执行一段SQL

    bsbforever
  • How is SAP UI5 Aggregation designed

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    授客
  • 深度学习之神经网络(反向传播算法)(三)

    神经网络最开始是受生物神经系统的启发,为了模拟生物神经系统而出现的。大脑最基本的计算单元是神经元,人类的神经系统中大概有86亿的神经元,它们之间通过1014-1...

    李小白是一只喵
  • NULL指针的奇妙之旅

    今天带大家了解下NULL指针是如何形成的? 当然了我们要深入到操作系统中去看看为何访问一个NULL指令会报Segment Fault的错误。

    DragonKingZhu

扫码关注云+社区

领取腾讯云代金券