jCrop HTML5 Холст Base64

Я пытаюсь работать с jCrop и canvas.

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

У меня есть пример JSFiddle.

Я обрезаю изображение, затем конвертирую в холст, но не могу преобразовать изображение в base64. Появляется следующая ошибка:

"SecurityError: The operation is insecure."

Я пробовал с..

console.log(canvas.toDataURL());

Что я делаю не так?


javascript canvas base64 html5-canvas jcrop
person Lenin Che    schedule 30.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

Чтобы избежать этого, вы можете:

  • Подавать изображение, обрезанное из того же источника, что и страница
  • Запросите использование разных источников, указав свойство crossOrigin для изображения.
  • Используйте прокси для передачи изображения с внешнего сайта через ваш сервер (в этом случае большая часть смысла теряется, делая все локально).

Кроме того:

  • При тестировании используйте не локальный протокол file://, а легкий локальный сервер (например, Mongoose). )

В противном случае вы будете получать ошибку безопасности каждый раз, когда используете toDataURL (или getImageData).

О запросе использования CORS с внешних серверов: вы можете только запросить такое использование, но сервер должен предоставить разрешение или нет.

Чтобы запросить:

<img src="..." crossOrigin="anonymous" >

или из JavaScript:

var img = new Image;

img.onload = handleOnLoad;
img.crossOrigin = 'anonymous';
img.src = '...';

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

person Community    schedule 30.10.2013

arrow_upward
0
arrow_downward

У меня была эта проблема. Проблема в том, что когда у вас уже есть холст с чем-то на нем, а затем положить на него что-то еще, он становится испорченным. мой обходной путь состоял в том, чтобы удалить элемент холста и заменить его, а затем поместить на него новое изображение.

person todd    schedule 16.01.2014