php - HTML5-canvas - Dela sparad bild på sociala medier

Tack för att du tar dig tid att läsa detta inlägg.

Jag har tittat igenom otaliga inlägg på detta forum, men kan fortfarande inte uppnå det jag är ute efter.

Jag har skapat en HTML5-canvas som sparar användarnas teckningar och bilder. När användaren trycker på publicera kommer han/hon att få en popupruta (lightbox) som visar en förhandsgranskning av hans/hennes bild, med möjligheten att dela bilden på sociala nätverk via Addthis.com.

Det här är vad jag har åstadkommit hittills. 1. På min canvas har jag en knapp som heter #btnPreview

$("#btnPreview").click(function (event) {
    canvas.deactivateAll();
    var strDataURI = canvas.toDataURL("png");
    var proporcao = 1;
    var proporcaoW = 500 / canvas.width;
    var proporcaoH = 400 / canvas.height;
    if (proporcaoW < proporcaoH) {
        proporcao = proporcaoW;
    } else {
        proporcao = proporcaoH;
    }
    $("#addthis_shareable").width(canvas.width * proporcao).height(canvas.height * proporcao).attr("src", strDataURI);
    //  $("#imgPreview").width(canvas.width*proporcao).height(canvas.height*proporcao).attr("src", strDataURI);
    $("#modalPreview").modal("show");
});

som öppnar ett lightbox-popupfönster.

  1. Bilden lagras i <img id"imgPreview" src"data:image/png;base64,...."> när jag försöker dela bilden med beskrivning på Facebook, Twitter osv fungerar det inte.

Jag vet vad problemet är, men kan inte skapa det javascript- och php-skript som krävs för denna uppgift.

Vad jag vill uppnå är att fråga detta forum om bästa praxis för detta koncept.

Min idé är att skapa ett save.Php-skript som sparar .png-filen utan uppmaningar på servern eller skapar en falsk URL www.example.com/image.png när jag trycker på #btnPreview

när popup-fönstret laddas kommer min img-url att vara

<img id"imgPreview" src"www.example.com/images/md5_timestamp.png">

Detta är det stängda exempel jag har hittat
Exempel 1 som leder till exempel 2
Exempel 2 spara base64
Exempel 3 Spara canvas som JPG eller PNG
Exempel 4 Väldigt nära det jag är ute efter - Det nedersta svaret

Jag hoppas att jag förklarade det korrekt.

Ser fram emot ditt svar.

Svar #1

:

Svar #2

Det kan finnas 2 scenarier:

  1. För att kunna dela en bild/postlänk på Facebook måste du först ha bilden sparad på din server (eller åtminstone serverad från din applikation)
  2. Om du vill posta det som en bild (foto) på Facebook, behöver du skapa ett OAuth2.0-flöde så att din applikation postar fotot på användarens vägnar.