Как использовать canvas getImageData () и putImageData (), чтобы скопировать часть холста и вставить ее в другую позицию? - PullRequest
Новая
       62

Как использовать canvas getImageData () и putImageData (), чтобы скопировать часть холста и вставить ее в другую позицию?

0 голосов
/ 21 апреля 2020

Кажется, все просто, но у меня все получается.

Что я хочу сделать sh это:

  • Загрузка изображения из файла и поместите его в указанное c положение (не 0,0) на холсте. Это делается правильно, без каких-либо проблем.

  • Скопируйте эту часть холста (на холсте есть другие рисунки, которые не нужно копировать) и поместите на другой местоположение, чтобы на холсте было две копии одинаковых данных изображения. В этой части я застрял.

Мой текущий код выглядит так: 

<script type="text/javascript">
    var obj=document.getElementById("test"), img=document.getElementById("testimg");
    //obj is the canvas object and img is an image object

    var cvs=obj.getContext("2d"), imgdata;
    //getting ready to draw

    cvs.fillStyle="#006060";

    sym(lambda,50,50,cvs);
    //this is an external function, which draws a small image on the canvas by putting its pixels, one by one, on the canvas

    img.onload=function(){
        cvs.drawImage(img,150,150);
        }
    //drawing the image loaded from file with <img /> on to the canvas

    imgdata=cvs.getImageData(150,150,18,18);
    //copying the part of image we need (this is the image we put on canvas from the file). its dimensions are 18 x 18

    cvs.putImageData(imgdata,100,100);
    //trying to put the image on location (100,100) on the canvas. this is where it is failing me
</script>

Что я здесь не так делаю? Как это сделать?

На веб-сайте w3schools приведен очень простой и короткий пример использования getImageData () и putImageData () на странице , где вы можете попробовать . Когда я пытаюсь скопировать эту процедуру для собственного использования, все это разваливается.

Где я ошибаюсь?

...