downloadByBlob(url,name) {
                let image = new Image()
                image.setAttribute('crossOrigin', 'anonymous')  //处理跨域 可以在浏览器安装cors插件
                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) => {    //图片的blob对象
                        let url = URL.createObjectURL(blob)  //将blob对象转为url
                        this.download(url,name)
                        // 用完释放URL对象
                        URL.revokeObjectURL(url)
                    })
                }
            },
            download(href, name) {
            let eleLink = document.createElement('a')
            eleLink.download = name  //下载的文件名
            eleLink.href = href   //文件流
            eleLink.click()  //单击下载
            eleLink.remove()  //移除
            },
    //remoteSelected选中的图片的数据(后台返回的数据),循环下载
           async writeImage(remoteSelected){
                this.loading = true;
                for(var key in remoteSelected) {
       let url = remoteSelected[key]['url']
       let    name = remoteSelected[key]['name']
                    await this.downloadByBlob(url,name);
                }
            }

laravel+vue+vuetify(下载图片到本地)的更多相关文章

  1. php下载图片到本地

    写了一天,就写了这么点代码,凑合用吧. #saveImage.php<?php /** * 图片下载方法,提供两种图片保存方式: * 1.按照图片自带的名称保存 * 2.按照自定义文件名保存 * ...

  2. 通过scrapy内置的ImagePipeline下载图片到本地、并提取本地保存地址

    1.通过scrapy内置的ImagePipeline下载图片到本地 2.获取图片保存本地的地址 1.通过scrapy内置的ImagePipeline下载图片到本地 1)在settings.py中打开  ...

  3. scrapy中的ImagePipeline下载图片到本地、并提取本地的保存地址

    通过scrapy内置到ImagePipeline下载图片到本地 在settings中打开 ITEM_PIPELINES的注释,并在这里面加入 'scrapy.pipelines.images.Imag ...

  4. 通过HttpURLConnection下载图片到本地--下载附件

    一.背景说明 现在我做的系统中,需要有一个下载附件的功能,其实就是下载图片到本地中.相应的图片保存在多媒体系统中,我们只能拿到它的资源地址(url),而不是真实的文件. 这里记录的是下载单个图片.下篇 ...

  5. 利用node来下载图片到本地

      本文是针对于知道图片地址的下载图片方法. 同时也是我的处男作(额,怪怪的〜);不要在意这些细节. 最近在弄项目迁移,需要把http的链接全换成https的:以前的cms不支持http的协议,然后就 ...

  6. URL地址下载图片到本地

    package test.dao; import eh.base.dao.DoctorDAO; import eh.entity.base.Doctor; import junit.framework ...

  7. vue2.0生成二维码图片并且下载图片到本地兼容写法

    vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcod ...

  8. python3 中自带urllib库可下载图片到本地

    刚从python3下载图片的语句python2的不太一样,具体python3语句如下: form urllib import request jpg_link = '......'  #图片链接 re ...

  9. java从网络中下载图片到本地

    public class imageDownload { public static void main(String[] args) { String url = "http://loca ...

随机推荐

  1. luogu P5161 WD与数列 SAM 线段树合并 启发式合并

    LINK:WD与数列 这道题可谓妙绝 我明白了一个增量统计的原理. 原本的想法是:差分之后 显然长度为1的单独统计 长度为2的以及更多就是字符串之间的匹配问题了. 对差分序列建立SAM 由于第一个是一 ...

  2. 解Bug之路-Nginx 502 Bad Gateway

    解Bug之路-Nginx 502 Bad Gateway 前言 事实证明,读过Linux内核源码确实有很大的好处,尤其在处理问题的时刻.当你看到报错的那一瞬间,就能把现象/原因/以及解决方案一股脑的在 ...

  3. zabbix配置自定义监控

    目录 zabbix配置自定义监控项---进程监控 1. 编写获取进程状态的脚本 2. 修改配置文件,添加自定义key 3. 配置监控项 4. 添加触发器 5. 媒介和动作 6. 触发并验证 zabbi ...

  4. day10.函数基础及函数参数

    一.函数 功能:包裹一部分代码 实现某一个功能 达成某一个目的 特点: """ 特点:可以反复调用,提高代码的复用性,提高开发效率,便于维护管理 函数基本格式 函数的定义 ...

  5. intellij idea springboot无法读取配置文件的解决方法

    问题描述 Spring Boot项目中运行之后,出现如下的错误: *************************** APPLICATION FAILED TO START *********** ...

  6. 031_go语言中的通道遍历

    代码演示 package main import "fmt" func main() { queue := make(chan string, 2) queue <- &qu ...

  7. SpringCloud系列之服务容错保护Netflix Hystrix

    1. 什么是雪崩效应? 微服务环境,各服务之间是经常相互依赖的,如果某个不可用,很容易引起连锁效应,造成整个系统的不可用,这种现象称为服务雪崩效应. 如图,引用国外网站的图例:https://www. ...

  8. JS笔记 语法

    javascript概述 简称为JS,是一款能够运行在JS解释器.引擎中的脚本语言 JS解释器.引擎 JS的运行环境 1.独立安装的js解释器 -nodeJS 2.嵌入在浏览器中的js解释器 JS基于 ...

  9. dom4j基本操作

    DOM4J与利用DOM.SAX.JAXP机制来解析xml相比,DOM4J 表现更优秀,具有性能优异.功能强大和极端易用使用的特点,只要懂得DOM基本概念,就可以通过dom4j的api文档来解析xml. ...

  10. C#LeetCode刷题-树

    树篇 # 题名 刷题 通过率 难度 94 二叉树的中序遍历   61.6% 中等 95 不同的二叉搜索树 II   43.4% 中等 96 不同的二叉搜索树   51.6% 中等 98 验证二叉搜索树 ...