How to upload a Canvas image to the infoblock?

I

Ivan Kasatkin2021-08-30 11:40:42

1C-Bitrix

Ivan Kasatkin, 2021-08-30 11:40:42

There is a Canvas image that the user generates, it is saved to the server, but how to add it to the infoblock?
As a matter of fact,

the code

<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-6 col-md-6 col--md-offset-6 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>


<button onclick="echoHello()">Say Hello</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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Maiker, 2021-08-30
@Dublet

Well, if it is transmitted to the server, then what is the problem in the processing script to add it to the infoblock? https://dev.1c-bitrix.ru/api_help/iblock/classes/c...
Well, by analogy, you can use other APIs for other actions.