Экспорт изображений HTML5 Canvas и загрузка функций сервера

Экспортируйте изображения HTML5 Canvas и загрузите их на сервер.

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

Поэтому следующий метод может оказаться тем, что вам нужно~

1. Используйте метод toDataURL() для экспорта изображения холста и получения данных в формате Base64.

2. Инкапсулируйте данные base64 в объекты blob.

3. Соберите данные формы

4.ajax загрузка

Конечно, процесс загрузки требует сотрудничества со стороны сервера, например, настройки междоменных полей, например согласованных полей. . .

Простая демонстрация:

 function handleSave () { //Экспортируем данные изображения в формате base64 var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //Инкапсулируем объект blob var blob = dataURItoBlob(base64Data); //Собираем данные формы var fd = new FormData(); fd.append(fileData, blob); //fileData настраивается fd.append(fileName, 123jpg); //fileName настраивается, имя генерируется случайным образом или жестко запрограммировано, в зависимости от требований //загрузка ajax, форма ajax произвольна и проблем с написанием JQ нет //Следует отметить, что на сервере нужно настроить разрешение междоменных запросов. Способ получения данных ничем не отличается от файла, загруженного с помощью <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST, URL-адрес, по которому вы отправили запрос на загрузку); localStorage.token);//Устанавливаем заголовок запроса, устанавливаем по мере необходимости xmlHttp.send(fd); //обратный вызов ajax xmlHttp.onreadystatechange = () => { //для выполнения кода... }; (base64Data) {вар byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(') ,')[1]); вар mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i) return new Blob([ia], {type: mimeString});};

 function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); я++; } вернуть новый Uint8Array(img_buffer);}var b64Image = Canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = новый XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

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

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

Пришлось преобразовать изображение Canvas в кодировке Base64 в Uint8Array Blob .

Ссылка: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

Вышеупомянутая функция экспорта изображений HTML5 Canvas и загрузки на сервер, представленная редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!

Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!