前端实现图片下载

这个问题的第一反应肯定是通过a标签下载啦～～，但是呢

由于a标签的href赋值为图片地址，只能起到预览的效果不能下载到本地，所以要用到canvas.drawImage的方法将地址转化成base64格式，然后赋值给a标签后再点击。

具体代码如下：

function downloadIamge (imgsrc, name) {
  // 下载图片地址和图片名
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous');
  image.onload = function () {
    let canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    let _dataURL = canvas.toDataURL('image/png'); // 得到图片的base64编码数据

    let blob_ = dataURLtoBlob(_dataURL); // 用到Blob是因为图片文件过大时，在一部风浏览器上会下载失败，而Blob就不会

    let url = {
      name: name || '图片', // 图片名称不需要加.png后缀名
      src: blob_
    };

    // 异步生成一个a标签，通过a标签的dow