美文网首页
WEB端如何下载图片

WEB端如何下载图片

作者: 阿布朗迪 | 来源:发表于2019-04-05 06:35 被阅读0次

    最近在做项目时遇到遇到这样的问题。Chrome浏览器无法下载图片,显示网络错误。很是纳闷,网上也查了很多的资料发现中文的资料非常的少,所以在这里总结下。

    关于图片下载不在赘述,我给出的方法是利用canvas进行图片下载。

    $scope.doloadQrcode = function (qrcodeUrl, fileName) {
    
            var basePath //图片base64地址
            var $img = new Image()
            $img.setAttribute('crossOrigin', 'anonymous')
            $img.src = qrcodeUrl
            $img.onload = function () {
              var canvas = document.createElement('canvas')
              canvas.width = $img.width
              canvas.height = $img.height
              var ctx = canvas.getContext("2d")
              ctx.drawImage($img, 0, 0)
              basePath = canvas.toDataURL()
              var blob = dataURItoBlob(basePath)
              downloadFile(fileName, blob)
            }
          }
    
          /**
           * 下载图片
           *
           * @param {any} fileName
           * @param {any} content
           */
          function downloadFile(fileName, content) {
            var oA = document.createElement('a');
            oA.href = content;
            oA.download = fileName;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            oA.dispatchEvent(event);
          }
    

    函数doloadQrcode l接受两个参数,一个是下载图片的地址,一个是可以认为是文件名。利用canvas进行转换。drawImage中0,0是原点。canvas.toDataURL()转换成base64格式。其实非jpg格式都往下都可以了。但是往往结果并不会如意。因为一些浏览器的原理,不能直接下载图片。我们需要在这里进行base64转化为blob流的格式。下面是转化blob流的方法。

    function dataURItoBlob(base64Data) {
        var byteString;
        if(base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else
            byteString = unescape(base64Data.split(',')[1]);
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for(var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {
            type: mimeString
        });
    }
    

    转化后就可以直接使用了。

    相关文章

      网友评论

          本文标题:WEB端如何下载图片

          本文链接:https://www.haomeiwen.com/subject/alxhiqtx.html