Canvas.toBlob || Canvas.toDataURL дает мне прозрачное изображение

Привет дев!

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

Для обрезки я использую react-cropper.

Моя проблема в том, что в chrome заголовок ограничение dataURL составляет 65529 пикселей.

Если я попытаюсь использовать canvas.getDataURL() на более 65529 пикселей, получится прозрачное изображение.

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

Чтобы отправить полноразмерное обрезанное изображение на сервер, я использую canvas.toBlob(). Но даже там я получаю прозрачное изображение...

Как я могу отправить холст высокого качества (макс. 1920x1080) как изображение на сервер?

Спасибо тем, кто найдет время ответить мне! :)


javascript canvas google-chrome html data-uri
person Elies Lou    schedule 12.02.2018    source источник
comment
Возможный дубликат canvas.toDataURL() для большого холста   -  person Vasyl Moskalov    schedule 12.02.2018
comment
Я так не думаю... Мой холст никогда не превысит размер 2000x2000.... И я не пытаюсь преобразовать в DataURL, который, кажется, ограничен 250x250px в хроме, а в blob, чтобы я мог отправлять изображения приличного качества на сервер...   -  person Elies Lou    schedule 12.02.2018
comment
Пустые вопросы: 1. Проверяли ли вы, что BLOB-объект содержит хорошее изображение (скажем, используя этот BLOB-объект в ‹img›, как описано здесь: developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob)? 2. Вы отправляли большой двоичный объект на сервер через POST? (Да, я понимаю, что это действительно глупый вопрос)   -  person Vasyl Moskalov    schedule 12.02.2018
comment
Предоставьте минимальный воспроизводимый пример, чтобы мы могли проверить, что не так с вашим кодом. Все браузеры могут экспортировать изображение холста, намного превышающее 1920 * 1080, в dataURI или Blob. По опыту таких вопросов я бы сказал, что вы где-то имеете дело с некоторым состоянием асинхронной гонки, например, вы можете вызывать toBlob до того, как рисуете на своем холсте, если рисуете элемент img.   -  person Kaiido    schedule 12.02.2018
comment
@VasylMoskalov на самом деле, блоб не содержит действительного изображения (в этом вся проблема) и да, конечно :') Похоже, проблема только для моего компьютера ... со всеми установленными и обновленными версиями Chrome (arch 4.15). .2-2)...   -  person Elies Lou    schedule 14.02.2018
comment
@Kaiido Пример, который я использую, это Демонстрация React Cropper Если я перейду к этому страницу и нажмите «Обрезать», область обрезки (внизу слева) остается пустой. Пожалуйста, сообщите мне, есть ли у вас такие же результаты. Если да, я могу закрыть вопрос. Спасибо, что нашли время!   -  person Elies Lou    schedule 14.02.2018
comment
@EliesLou Простой вопрос. Вы пытались преобразовать в Blob что-то вроде рендеринга через ctx.drawImage()?   -  person Vasyl Moskalov    schedule 14.02.2018

Ответы (1)


arrow_upward
0
arrow_downward

У меня была такая же проблема с хромом. После отключения scriptsafe и плагина µBlock все заработало как часы.

person mheimschild    schedule 25.07.2018