Fabric.js canvas.toDataURL（）通过Ajax发送到PHP [英] Fabric.js canvas.toDataURL() sent to PHP by Ajax

问题描述

我在这里有一个问题，当我需要创建一个透明背景的图像。我仍然不知道是否是与fabricjs或php的问题。一切工作正常，当我送彩色背景的图像。当我发送带有透明背景的图像时，会出现问题。
生成的图像用黑色背景创建。
所以，让我更好地解释：
当用户点击保存按钮，我将服务器端的canvas的字符串表示发送到php，以生成画布的图像。所以我使用follow函数通过Ajax（jQuery的POST函数）发送canvas的字符串表示：

I have a problem here when I need create a image with transparent background. I still don´t know if the problem is with fabricjs or with php. Everything works fine when I sent a image with colored background. The problem occurs when I send a image with transparent background. The generated image is created with black background. So, let me explain better: When the user click in save button, I´m sending the string representation of the canvas to php in the server-side, to be generated the image of the canvas. So I´m using the follow function to sending the string representation of the canvas by Ajax (POST function of jQuery):

    function sendStringRepresentation(){
        var strDataURI = canvas.toDataURL();
        strDataURI = strDataURI.substr(22, strDataURI.length);

        $.post("action/createImage.php",
        { 
            str: strDataURI
        },
        function(data){
            if(data == "OK"){
                $("#msg").html("Image created.");
        }
        else{
            $("#msg").html("Image not created.");
            }
        });
    }

在PHP文件中我使用以下代码生成图像：

In PHP file I´m using the follow code to generate the image:

    // createImage.php

    $data = base64_decode($_POST["str"]);

    $urlUploadImages = "../uploads/img/";
    $nameImage = "test.png";

    $img = imagecreatefromstring($data);

    if($img) {
        imagepng($img, $urlUploadImages.$nameImage, 0);
        imagedestroy($img);

        // [database code]

        echo "OK";
    }
    else {
        echo 'ERROR';
    }

同样，问题只是背景透明画布。有色背景一切正常。

Again, the problem is just with background transparent canvas. With colored background everything works fine.

推荐答案

最后一步是完全相反的：

The last step is quite the opposite:

imagecopyresampled( $img, $alpha_image, 0, 0, 0, 0, $w, $h, $w, $h );

图片是透明的！

这篇关于Fabric.js canvas.toDataURL（）通过Ajax发送到PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！