89961


ajaxでリクエストを送り、  
バックエンドで「Intervention Image」を利用して画像を加工したものを  
ローカルにダウンロードしたいのですが、  
加工した画像データをblobに変換することができず詰まっておりました。

Intervention Imageにstreamで返却する関数などもあるとのことで  
やってみてたのですが、  
フロントに戻ってきた時点で文字化けしてしまいという状況でした。

どなたかお助けしていただけないでしょうか。  
よろしくお願いします。

## javascript

[code]

    $.ajax({
            type: 'GET',
            url: '/export/img',
            data: {
                'img_type': imgType
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        }).done((response) => {
            const blob = new Blob([response], {type: 'image/png'});
            const filename = 'test.png'
            const downloadUrl  = (window.URL || window.webkitURL).createObjectURL(blob);
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.download = filename;
            link.click();
            (window.URL || window.webkitURL).revokeObjectURL(downloadUrl);
        }).fail(() => {
            $("#errorModal").modal("show");
        });
    
    
[/code]

## backend(controller)

[code]

    public function export(Request $request)
        {
            // 画像生成処理
            $img = $this->service->createImg($request->img_type);
            return $img->stream('png')->__toString();
        }
    }
    
    
[/code]


CC BY-SA 4.0
2022-07-13T07:50:42.073
89956
2022-07-13T15:59:58.320
2022-07-13T08:07:31.383
3060
53436
question
laravel ajax
Intervention Imageで加工した画像を非同期でローカルにダウンロードしたい


自己解決できました！！

## javascript

[code]

    function exportImg(imgType) {
      $.ajax({
          type: 'GET',
          url: '/export/img',
          data: {
            'img_type': imgType
          },
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      }).done((response) => {
          const base64 = response.encoded;
          a = document.createElement("a");
          a.href = base64;
          a.download = dayjs().format("YYYYMMDDHHmmss") +".png";
          a.click();
          $("#spinner").css("display", "none");
      }).fail(() => {
          $("#errorModal").modal("show");
      });
    }
    
[/code]

## php

[code]

    public function export(Request $request)
    {
        // 画像生成処理
        $img = $this->service->createImg($request->img_type);
        return $img->encode('png')->encode('data-url');
    }
    
[/code]


CC BY-SA 4.0
2022-07-13T15:59:58.320
89961
2022-07-13T15:59:58.320
53436
89956
answer