Question

I am able to create the image but the png it generates has a dark background. actually it should be transparent but i have no idea why its becoming black color in background. what am i doing wrong ?

$img = imagecreatefromstring(base64_decode($profilePicture));
    if ($img != false) {
        header('Content-Type: image/png');
        $rnd = sprintf('%04d', rand(0, 9999));
        $fileName = $rnd.'_'.time().'.png'; // random number + timestamp

        if (!imagepng($img, $upload_path.'images\\user\\profile\1\\'.$fileName))
            $this->sendResponse(false, 1133);

This is how it should be, http://www.image-share.com/upload/2510/41.png

But this is the image i am receiving... http://www.image-share.com/upload/2510/42.png

Was it helpful?

Solution 2

This way of saving helped to get the original image quality.

file_put_contents($upload_path.'images\\user\\profile\1\\'.$fileName, base64_decode($profilePicture));

OTHER TIPS

Basically the image should have its background marked as transparent, nothing to do with the code

in controller file

public function actionCreate()
{
    $model = new Datamykad();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {


        $folder = Yii::getAlias('@app').'\images';

        $filename = date("Y-m-d_H-i-s").'.png';
        $file_path = $folder.'\.'.$filename;
        $rawImage = $model->stringtoimage;

        $removeHeaders = explode(',', $rawImage);
        //need to decode before saving (data base64)
        $decode= base64_decode($removeHeaders[1]);
        file_put_contents($file_path, $decode);

    //}
        $model->img =$filename;
        $model->save();
        return $this->redirect(['view', 'id' => $model->id]);
    } else {
        return $this->render('create', [
            'model' => $model,
        ]);
    }
}

view file.

at javascript;

function saveIt(){
    //var canvasData = new Image();
    var myDrawing = document.getElementById("canvas");
    var canvasData = myDrawing.toDataURL("image/png");
    //var postData = "canvasData="+canvasData;
    var postData = canvasData;

    imgLog(postData);
    }
function imgLog(data){
    document.getElementById("datamykad-stringtoimage").textContent += data;  
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top