根据已有img实现下载

这里的img指一个<img>标签或者一个src链接;

  /**
   * 只展示原理 不讲究封装
   */
  var src = getSrc();  // img的src或者其他方式获取
  var tempImg = document.createElement('img');
  var tempLink = document.createElement('img');

  img.onload = function() {
    var tempCanvas = document.createElement('canvas');
    var oTx = tempCanvasgetContext('2d');

    tempCanvas.width = tempImg.naturalWidth || exportImage.width;
    tempCanvas.height = tempImg.naturalHeight || exportImage.height;
    context.drawImage(exportImage, 0, 0, canvas.width, canvas.height);

    if (window.navigator.msSaveBlob) {
      window.navigator.msSaveBlob(canvas.msToBlob(), 'test.png');
    } else if ('link' in tempLink) {
      tempLink.setAttribute('src', canvas.toDataURL());
      tempLink.setAttribute('download', 'test.png');
      tempLink.click();
    } else {
      window.open( canvas.toDataURL());  // 在新窗口打开图片
    }

    tempImg = null; tempLink=null; tempCanvas=null;
  };
  img.src = src;

至此 一个下载 就完成了;
URL.createObjectURL 可实现文本类下载;下回分解;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,009评论 19 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • Tesseract是一个流行的OCR(Optical Character Recognition,光学字符识别)库...
    疯狂的冰块阅读 526评论 0 0
  • 现象: 数据库两节点中:select sysdate from dual;返回时间比OS date时间晚了13小时...
    DBA阅读 937评论 0 0