How to attach an image to an order?

I

Ivan Kasatkin2021-08-20 06:05:25

1C-Bitrix

Ivan Kasatkin, 2021-08-20 06:05:25

The idea is this: there is an image generator

Page Code

<!DOCTYPE html>
<html>

<link rel="stylesheet" href=

"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

    </script>

    <script src=

"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">

    </script>

<body>
 <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
  <div id="createImg" style="border:1px solid;">
<img id="image1" src="https://tvoehobbys.ru/upload/iblock/ad3/k0e2bibflvps3xyvmqkz0j5ah5n2fao2.jpg" style="display:none;"/>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid #d3d3d3;">
Обновите браузер</canvas>
<br><br>
<input type="text" id="nashinput">                    
<button type="submit" id="poslat">Введите текст</button>
  <button type="submit" id="fon">Фон</button>
<button id="geeks" type="button" 

                                      class="btn btn-primary top">

            Create Image</button>

        <div id="img" style="display:none;">

            <img src="" id="newimg" class="top" />

        </div>

    </div>
<br>

        </div>
<script>
document.getElementById('poslat').onclick = function(){
var tekt = document.getElementById('nashinput').value;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,500,0);
grd.addColorStop(0,"white");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,800,600);


ctx.font = "50px Arial white";
ctx.strokeText(tekt,30,100);
};
</script>
<script>
document.getElementById('fon').onclick = function(){
var tekt = document.getElementById('nashinput').value;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var img=document.getElementById("image1");
var canvas=document.getElementById("myCanvas")
var x=canvas.getContext("2d");
x.drawImage(img,0,0);

ctx.fillStyle = "#FFF";
ctx.font = "italic 30pt Arial";
ctx.fillText(tekt,30,60);
};
</script>
  <script>

        $(function() {

            $("#geeks").click(function() {

                html2canvas($("#createImg"), {

                    onrendered: function(canvas) {

                        var imgsrc = canvas.toDataURL("image/png");

                        console.log(imgsrc);

                        $("#newimg").attr('src', imgsrc);

                        $("#img").show();

                        var dataURL = canvas.toDataURL();

                        $.ajax({

                            type: "POST",

                            url: "script.php",

                            data: {

                                imgBase64: dataURL

                            }

                        }).done(function(o) {

                            console.log('saved');

                        });

                    }

                });

            });

        });

    </script>

</body>

Handler

<?php  

  
// Требуется php5

define('UPLOAD_DIR', 'images/');  

$img = $_POST['imgBase64'];  

$img = str_replace('data:image/png;base64,', '', $img);  

$img = str_replace(' ', '+', $img);  

$data = base64_decode($img);  

$file = UPLOAD_DIR . uniqid() . '.png';  

$success = file_put_contents($file, $data);  

print $success ? $file : 'Unable to save the file.';  

  
?>

And he should transfer the image to the basket, and from there to the design.
Is it real at all?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

tgarl, 2021-08-20
@tgarl

The product is added to the cart, not the picture.
Therefore, as I see it, there are 2 possible solutions:
1. After clicking the Add to Cart button, you process the data, create a new product with a price and other things, including a picture, and send it to the basket
2. If this is an addition to an existing product, then generate picture, register it in Bitrix and attach the identifier / path as a property of the product that you send to the basket.