Javascript Canvas получает данные с изображения и отображает его - PullRequest
Новая
       36

Javascript Canvas получает данные с изображения и отображает его

0 голосов
/ 08 июня 2019

Понятия не имею, почему это не работает.Атрибут src изображения изменяется с новыми данными, но изображение фактически не видно.Я пробовал с несколькими разными изображениями.Это просто javascript в браузере, и требуется Jquery. 

<body>
<img src="" id="test">
</body>
<script>
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    let img = new Image();
    img.onload = getIt
    img.src = 'download.png';

    function getIt() {      
        canvas.width = this.width;
        canvas.height = this.height;
        const imageData = ctx.getImageData(0, 0, this.width, this.height);
        ctx.drawImage(this, canvas.width , canvas.height);
        ctx.putImageData(imageData, canvas.width, canvas.height);

        $('#test').get(0).src = canvas.toDataURL("image/png");
    }

</script>

Я пробовал с несколькими разными изображениями, все png.На данный момент это весь код проекта, поэтому я не предвижу ничего, что могло бы ему помешать.

Результат таков, но изображение не видно: 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">

РЕДАКТИРОВАТЬ: Кажется, что он может получить данные из изображения неправильно, но я понятия не имею, почему ... Я имею в виду, почему он получит данные, но будет неполным или неправильным?

1 Ответ

1 голос
/ 08 июня 2019

Пожалуйста, попробуйте это: (Вам не нужно получать или помещать данные изображения)

Также вы делали это: ctx.putImageData(imageData, canvas.width, canvas.height);.Это означает, что вы рисуете изображение полностью вне холста.Сделайте это вместо: ctx.putImageData(imageData, 0,0);

const canvas = document.createElement("canvas");

    const ctx = canvas.getContext("2d");
    let img = new Image();
    img.onload = getIt
    img.src = "download.png";

    function getIt() {    
        canvas.width = this.width;
        canvas.height = this.height;
        //draw the image onto the canvas
        ctx.drawImage(this, 0,0);
        //use the data uri 
        test.src = canvas.toDataURL("image/png");
    }

<img src="" id="test">
...