html5 Фильтры изображения с холстом

У меня есть источник http://www.storminthecastle.com/projects/imagefilters1/. Это касается некоторых манипуляций с изображениями в холсте html5.html5 Фильтры изображения с холстом

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

function reset() { 
    imageURL = "./sandbox.jpg"; 
    imageFilter = grayscale; 
    document.querySelector("#filename").innerHTML = ""; 
    update(); 
    }

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

function reset() { 
    imageURL = "http://xxxxxx.jpg"; 
    imageFilter = grayscale; 
    document.querySelector("#filename").innerHTML = ""; 
    update(); 
    }

Когда я проверить это, изображение отображается правильно. Однако все функции больше не работают, и я не знаю, почему. Я понятия не имею, почему он не может использовать url в качестве аргумента, и я не знаю, как его модифицировать, чтобы заставить его работать. Любая помощь?

источник

2013-09-27 Sky

Возможный дубликат [Браузерный холст CORS Поддержка кросс-доменного манипулирования изображениями] (http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation). Если изображение загружено, запуская CORS, вы можете отображать только изображение, но не изменять, не устанавливать или не получать пиксели из них, что необходимо для некоторых фильтров. – K3N

Когда вы загружаете изображение из другого источника, сначала нужно нарисовать изображение на холсте, затем изменить пиксели, применить фильтры. есть расширение для Chrome с именем [Lomo +] (https://chrome.google.com/webstore/detail/lomo +/mihmjgdafbdggpgjfaeinppnlnpgelnj? hl = ru) вы должны увидеть его источник –

Привет, Кен, по ссылке, он упомянул, что он работает с Chrome и Firefox правильно? Я использую Chrome, но он не работает. Не хватает ли какой-либо кодировки, чтобы она работала? Адам, внутри кодирования, есть 'context.drawImage (изображение, 0, 0, canvas.width, canvas.height);' Итак, я думаю, что он уже втянут в холст? Что касается изменения пикселей и применения фильтров, я новичок в этом и не имею к этому понятия. Я посмотрю на Ломо. – Sky

Спасибо за предоставленную ссылку. Далее я прочитал о проблеме COR и смог найти эту строку кодирования для добавления.

img.crossOrigin = ''; 
//img domain different from app domain 
img.src = 'http://xxx.jpg';

Просто установите свойство crossOrigin изображения, чтобы оно работало. В принципе, это позволит перекрестное доменное изображение для манипуляции. Без него любой перекрестный домен будет заблокирован, и вы получите исключение безопасности. На самом деле спасибо за помощь! :)

Для дополнения, я только проверял использование Chrome и работает.

источник

2013-09-28 19:29:31 Sky

html5 Фильтры изображения с холстом

ответ

Смежные вопросы