zoukankan      html  css  js  c++  java
  • 前端实现下载图片

    背景:一般使用a标签,但浏览器有时候不会下载,会打开新的标签页,很不友好

    下面这段代码可以实现浏览器下载图片

     1 function downPic(src,imgName) {
     2         var canvas = document.createElement('canvas');
     3         var img = document.createElement('img');
     4         img.onload = function(e) {
     5             canvas.width = img.width;
     6             canvas.height = img.height;
     7             var context = canvas.getContext('2d');
     8             context.drawImage(img, 0, 0, img.width, img.height);
     9             canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    10             canvas.toBlob((blob) => {
    11                     var link = document.createElement('a');
    12                     link.href = window.URL.createObjectURL(blob);
    13                     link.download = imgName;
    14                     link.click();
    15                 },
    16                 "image/jpeg");
    17         };
    18         img.crossOrigin = "Anonymous";
    19         img.src = src;
    20     }
    View Code
  • 相关阅读:
    mysql基础命令(一)
    vue组件之间的通信
    wepy的使用
    mockjs中的方法(三)
    每周散记 20181022
    api资源
    三七
    画中画 视频合成
    每周散记 20180910
    linux文件权限多一个+啥意思
  • 原文地址:https://www.cnblogs.com/LiuNew/p/10563000.html
Copyright © 2011-2022 走看看