toDataURL вместе с приложенным css к элементу canvas - PullRequest
Новая
       36

toDataURL вместе с приложенным css к элементу canvas

0 голосов
/ 19 апреля 2019

У меня есть элемент холста, в который я загружаю изображение и применяю фильтр CSS к этому холсту, а затем генерирую URL из холста, используя toDataURL.Затем я создаю новый элемент изображения и добавляю его к телу.Но к этому вновь созданному элементу изображения не применен фильтр CSS.

Код: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="main-container">
      <canvas id ="c"></canvas>
    </div>
    <script>        
    let canvas = document.getElementById('c');
    let ctx = canvas.getContext('2d');
    var image = new Image();
    image.src = 'http://127.0.0.1:5500/assets/imgage1.jpeg'
    canvas.setAttribute("style", "-webkit-filter: sepia()");
    image.onload = function(){
        ctx.drawImage(image,0,0,70,70);
        setTimeout(() => {
            let data = canvas.toDataURL();
            let newImg = document.createElement('IMG')
            newImg.src= data;
            document.body.append(newImg)
        }, 2000); 
    }
    </script>
</body>
</html>

Мой вопрос заключается в том, что созданный URL не содержит CSS, если неттогда какова работа вокруг этого.Я должен выполнить обработку изображения на холсте, а затем снова преобразовать этот холст в изображение с теми же фильтрами, примененными к холсту.Может кто-то что-то предложить.PS: я уже использовал CAMAN.js и glfx.js, и у них обоих нет фильтра тонировки в этом.Я буду использовать холст (2d), чтобы применить оттенок.Это также можно сделать в glfx.js, но эта библиотека использует webGl, и я немного заблудился в этой теме.

...