前端实现图片单张下载

查阅了好多，自己用在所需场景中总结：

JS:

    //单张下载(方法)
    function downloadImgByBlob(src) {
      let canvas = document.createElement('canvas');
      let img = document.createElement('img');
      let imgSuffix = '';

      if (src.includes('.jpg') || src.includes('.jpeg')) {
        imgSuffix = 'image/jpeg';
      } else {
        imgSuffix = 'image/png';
      }

      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;

        let context = canvas.getContext('2d');

        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

        canvas.toBlob((blob) => {
          let link = document.createElement('a');

          link.href = window.URL.createObjectURL(blob);
          link.download = '';
          link.click();

          URL.revokeObjectURL(src);
        }, imgSuffix);
      };

      img.setAttribute('crossOrigin', 'Anonymous');
      img.src = src + '?time=' + new Date().valueOf();
    }

    //单张下载点击事件
    $(function () {
      $('#aa').on('click', '.download_btn', function () {
      	//获取得图片url
        let url = $(this).attr('data-url');//此为juicer模板所获取得图片url
        downloadImgByBlob(url);
      });
    });