多災多難的Image Editor

事源是, 老闆希望加入一個可以加入文字和加入圖片的banner designer。在網路上找, 最合符需要的就只有toast UI Image Editor, 找來找出都沒有其它適合的。

花了一點時間把它裝嵌以為可用, 結果在CORS卡關卡了很久, 因為圖片不是寄存在自己的伺服器, 設定不到header("Access-Control-Allow-Origin: *");,所以圖片load不到出來, 打算放棄了, 可是要自己build from scratch 跟本無從入手, 感覺快要崩潰了……特然想到試試自行寫一個proxy, 竟然成功了:

<?php

// this file is used for image to bypass CORS policy restrictions from TOAST UI Image Editor

$path = $_REQUEST['path'];

$request = curl_init($path);

header("Content-Type: image/png");

header("Access-Control-Allow-Origin: *");

curl_setopt($request, CURLOPT_FOLLOWLOCATION, true);

                 curl_setopt($request, CURLOPT_SSL_VERIFYPEER, false); 

curl_exec($request);

          ?> 

這個原理是把圖片url 由https://www.aaa.com/a.jpg 改換成https://localhost?path=https://www.aaa.com/a.jpg, 利用curl把圖片下載以及output出來, 那麼因為proxy是在自己伺服器上自定義的, 就可以加入header("Access-Control-Allow-Origin: *"); , 注意curl_setopt($request, CURLOPT_FOLLOWLOCATION, true); 加入這一句後如果圖片本身會redirect的話也不會curl 不到圖片, 結果成功繞過CORS限制, 可以成功load到圖片了!