Мне нужен способ скопировать части холста в другом месте на том же холсте - PullRequest
Новая
       39

Мне нужен способ скопировать части холста в другом месте на том же холсте

0 голосов
/ 16 декабря 2018

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

Все, что мне нужно сделать, это "выбрать копию-паста "на холсте", что занимает очень мало времени в Microsoft Paint, но в JS оказывается чрезвычайно сложным.Дело в том, что на самом деле мне нужно выполнить пару тысяч таких снимков на изображениях шириной / высотой до 12 тысяч пикселей, поэтому делать это на Paint не вариант.

Вот самый простой пример, который ямог бы написать, просто чтобы сосредоточиться на проблеме, которая у меня есть:

Вот тело HTML: 

<canvas id="canvas" width="200" height="100"></canvas>
<img id="house" class="hidden" type="img/png" src="house.png"></img>

Вот JS: 

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    var house = document.getElementById("house");

    ctx.drawImage(house, 10, 10);
    var data = ctx.getImageData(10, 10, 80, 80); // ERROR
    ctx.putImageData(data, 110, 10);
}

И (хотяЯ думаю, что это не имеет значения) вот CSS: 

.hidden {
    display: none;
}

Строка, которую я прокомментировал как "ОШИБКА", выдает следующее: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Несколько важных вещей, на которые следует обратить внимание, это то, что все этифайлы находятся в моих локальных каталогах (точнее, в папке на рабочем столе), поэтому я не связан ни с одним веб-сайтом, ни с хостом, ни с чем-либо, зависящим от Интернета.Кроме того, у меня нет ни серверов, ни серверов, поэтому я не могу изменить какие-либо авторизации или настройки CORS;в конце концов, зачем мне это?Все, что я пытаюсь сделать, это копировать и вставлять пиксели.

Я также пытался создать матрицу строк размером 12k на 12k, где каждая строка представляет значение пикселя изображения.Таким образом, мне не пришлось бы использовать getImageData на холсте, но я мог бы работать со строками и изменять их значения, за исключением того, что это не работает, потому что я не могу использовать getImageData на изображении.

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

РЕДАКТИРОВАТЬ

Я чувствую себя глупо, что не попробовал это раньше, но я нашел очень простойРешение: используйте Проводник вместо Chrome.Проводник не выдает никаких ошибок при вызове getImageData.

...