WEB端如何下载图片

最近在做项目时遇到遇到这样的问题。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
    });
}

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