php - HTML5 canvas - Compartiendo imagen guardada en redes sociales

Gracias por tomarte el tiempo para leer esta publicación.

He revisado innumerables publicaciones en este foro, pero aún no puedo lograr lo que busco.

He creado un canvas HTML5 que guarda los dibujos e imágenes de los usuarios. Cuando el usuario presiona publicar, se le mostrará un cuadro emergente (lightbox) con una vista previa de su imagen, con la opción de compartir la imagen en redes sociales usando Addthis.com.

Esto es lo que he logrado hasta ahora. 1. En mi lienzo tengo un botón llamado #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");
});

que abre una ventana emergente de lightbox.

2. La imagen se almacena en <img id"imgPreview" src"data:image/png;base64,...."> cuando intento compartir la imagen con descripción en Facebook, Twitter, etc., no funciona.

Sé cuál es el problema, pero no puedo crear el script de JavaScript y PHP requerido para esta tarea.

lo que quiero lograr es preguntar en este foro la mejor práctica para este concepto.

Mi idea es crear un script save.Php que guarde el archivo .png en el servidor sin solicitudes o creando una URL falsa www.example.com/image.png cuando presione #btnPreview

una vez que la ventana emergente se cargue, mi URL de imagen será

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

Este es el ejemplo cerrado que he encontrado
Ejemplo 1 que conduce al ejemplo 2
Ejemplo 2 guardar base64
Ejemplo 3 Guardar canvas como JPG o PNG
Ejemplo 4 Muy cerca de lo que busco - La respuesta final

Espero haberlo explicado correctamente.

Esperando su respuesta.

Respuesta #1

:

Respuesta #2

Podrían darse 2 escenarios:

1. Para poder compartir una foto/URL de publicación en Facebook, necesitarás tener la foto guardada en tu servidor primero (o al menos servida desde tu aplicación)
2. Si deseas publicar eso como una imagen (foto) en Facebook, necesitarás crear un flujo OAuth2.0 de manera que tu aplicación publique la foto en Facebook en nombre del usuario.