Как правильно сделать запрос ajax на javascript?

Question

[Артем Колчин]

Подскажите , пишу скрипт на javascript, хочу сделать скриншот на канвасе (это будет набор изображений которые формируются при прохождении опросника) и поделиться им в соц сети.
Итого нашел эту библиотеку
https://html2canvas.hertzen.com/

Далее на js

window.onload = function() {
    document.getElementById("qq").onclick = function() {
        html2canvas(field).then(function(canvas) {
            var my_screen = canvas.toDataURL('image/jpeg', 0.5)
            console.log(my_screen)
          document.getElementById("vk").addEventListener('click', function(){
            window.open('https://vkontakte.ru/share.php?url='+my_screen+',sharer,status=0,toolbar=0,width=650,height=500')
        })
        });
    };
}

Но так как в my_screen, лежит изображение в base64, то хочу прибегнуть к ajax и php

То есть алгоритм такой, я функцией собираю скриншот на канвасе, с помощью ajax сохраняю изображение в папку сайта и возвращаю урл изображения в виде ссылки где оно лежит.

Ну а далее скрипт для того чтоб поделиться

window.open('https://vkontakte.ru/share.php?url='+my_screen+',sharer,status=0,toolbar=0,width=650,height=500')

Аякс разобрался как работает на jquery , а вот на ванильном js не пойму как сделать.
В php же думаю так,

<?php
	$name = time().".jpg";
	$check_save = @file_put_contents($name, base64_decode($_POST["data"]));
?>

На сколько правильное решение сформировалось в голове, и как правильно отправить запрос ajax именно на ванильном js?

Comments

[N]

как правильно отправить запрос ajax именно на ванильном js?

fetch

[Артем Колчин]

N, получается можно и без бекенда решить задачу?

[N]

Артем Колчин,

Аякс разобрался как работает на jquery , а вот на ванильном js не пойму как сделать.

fetch заменит ajax в jquery...дальше по той же "схеме"...

получается можно и без бекенда решить задачу?

Нет.

[Dark_Dante]

@file_put_contents
В приличном обществе за такое бьют

Answer 1

[ThunderCat]

На сколько правильное решение сформировалось в голове,

Достаточно стандартное решение

и как правильно отправить запрос ajax именно на ванильном js?

XMLHttpRequest или fetch, по сути разницы нет, единственно надо учесть что данные через фетч по умолчанию попадут в php://input, а не в $_POST, либо нужно формировать запрос с формДата в качестве отсылаемой структуры данных.

получается можно и без бекенда решить задачу?

Нет. Не понятно откуда такой вывод...

Comments

[Артем Колчин]

Есть какой нибудь пример как отправить запрос на сервер? PHP часть могу написать, а вот с ванильным прям беда....

Ну вот есть у меня переменная my_screen
В ней лежит картинка в base64, как ее отправить XMLHttpRequest или fetch , и вернуть потом значение из PHP нормального url?

[ThunderCat]

Артем Колчин,
https://www.google.ru/search?q=fetch+js+send+data
https://www.google.ru/search?q=js+xmlhttprequest+s...
по каждой из ссылок более миллиона примеров.

[Артем Колчин]

ThunderCat, А можете пример сделать? не совсем понимаю как вернуть переменную с нормальным урлом изображения. Может поможете а я вам скину денюшку за помощь? или так тут нельзя?

[ThunderCat]

Артем Колчин, открываем первый результат гугла фетч,

fetch('/ваш/обработчик/на/пхп')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data); // в дата будет лежать то, что пхп обработчик отдал через echo, 
//естественно на пыхе вы должны получить урл картинки и сделать echo json_encode($url);
  });