Proxy Gambar dengan Google App Scripts

Saya telah menjadi penggemar berat Google App Scripts . Layanan ini memungkinkan Anda membuat skrip canggih yang dapat dijadwalkan dan terintegrasi dengan Google (email, Google Documents, Excel) dan API eksternal. Anda menulis dalam JavaScript, dalam editor kode berbasis browser tepat di Google Drive dan skripnya bahkan dapat dipublikasikan sebagai aplikasi web. Kuota atau batasannya cukup bagus sehingga Anda bisa dengan cepat membangun sesuatu yang kuat secara gratis .

Hari ini, saya akan menunjukkan cara membuat Proxy Gambar dengan Google App Scripts yang memungkinkan Anda mengambil gambar dari domain lain atau membahas kebijakan asal-usulbrowser yang sama . Pada dasarnya, Google App Script adalah proxy sisi server untuk permintaan sisi klien Anda. Jadi, jika Anda mengekspor SVG sebagai gambar dengan gambar yang dihosting di domain lain atau menyimpan kanvas HTML5 dengan toDataURL (), ini dapat membantu Anda menghindari kesalahan kanvas dan browser yang tercemar. Tapi, sungguh, ini hanyalah contoh sederhana dari Google App Script yang diterbitkan sebagai aplikasi web .

Konsepnya sederhana. Saya menjalankan skrip dan meneruskannya ke url gambar yang naskahnya akan diambil dan dikonversi ke data dalam pengkodean base64 . Akan lebih mudah untuk hanya proxy atau mengembalikan gambar biner

tapi kelas App Script Content Service tidak mengizinkan output konten biner . Jadi, script harus mengubah gambar biner menjadi teks dan meneruskannya kembali ke respon. Mari kita lihat kodenya.

function doGet(e) {
  var url = decodeURIComponent(e.parameter.url);
  try {
    var response = UrlFetchApp.fetch(url);
  } catch (e) {
    return e.toString();
  }
  var type = response.getHeaders()['Content-Type'];
  var b64 = Utilities.base64Encode(response.getContent());
  var data = 'data:'+type+';base64,'+b64;
  return ContentService.createTextOutput(data);
}

Kami memiliki satu fungsi yang mengambil parameter kueri URL, membuat permintaan ke url tersebut dengan panggilan UrlFetchApp, menggunakan layanan Utilities.base64Encode untuk mengubah gambar biner menjadi teks, dan kemudian mengembalikannya ke metode ContentService.createTextOutput.Berikut adalah contoh untuk gambarini:

Https://script.google.com/macros/s/AKfycby_WcmX-_rrdqP8tKPwlz1Gw3amIJ3lZQUVYRaIkAKWQZbauNo/exec?url=http://techslides.com/demos/samples/sample.png

Ini adalah Url Gambar ke DataURL Converter:
Https://script.google.com/macros/s/AKfycby_WcmX-_rrdqP8tKPwlz1Gw3amIJ3lZQUVYRaIkAKWQZbauNo/exec?url=INSERT-IMAGE-URL-HERE

Tentu saja, jika server hosting gambar memang memiliki CORS , maka Anda bisa menarik dan mengubah atau mengakses data gambar tanpa memerlukan proxy sisi server . Tapi tanpa header CORS, permintaan semacam itu akan gagal dengan "diblokir dari pemuatan oleh Kebijakan Bagi Hasil Lintas Sumber Asal: Tidak ada header 'Access-Control-Allow-Origin' ada pada kesalahan" sumber daya yang diminta.

Berikut adalah contoh Google App Script lainnya .