Canvas реализует пример кода для локального сохранения изображений.

Требования: сохранять содержимое HTML5 в виде изображений.

Идея: сгенерируйте изображения в формате Base64 с помощью рисунка Canvas, нажмите и удерживайте, чтобы сохранить их на локальном компьютере.

Проблема: Canvas запрещает междоменный доступ, длительное нажатие Android WeChat не может сохранить изображения в формате Base64, изображения, полученные сервером, сжимаются.

Вопрос 1. Междоменный доступ к Canvas запрещен. Если изображение поступает из других доменов, вызов toDataURL() приведет к ошибке.

Решение. Тег <img> может решить междоменные проблемы путем введения атрибута crossorigin, то есть crossOrigin=Anonymous или crossOrigin=*. Обратите внимание, что параметр «Anonymous» в мобильной среде Q не поддерживается и его необходимо установить. на '*'. Если используется crossorigin=anonymous, то это эквивалентно анонимному CORS.

Проблема 2. Тег <img> с установленным параметром crossOrigin не может извлечь междоменные изображения, и img.onload не может быть запущен.

Решение. Для фоновой пересылки или прокси-сервера nigix установите Access-Control-Allow-Origin: wx.qlogo.cn, чтобы разрешить статическим изображениям сервера ресурсов пересекать домены. Этот параметр решает проблему получения междоменных изображений. (На изображении показано доменное имя аватара пользователя wx.qlogo.cn, которое имеет междоменные проблемы)

Вопрос 3. Изображения в формате Base64 нельзя сохранить при длительном нажатии на WeChat h5 на телефоне Android.

Решение. Загрузите изображение в формате Base64, нарисованное с помощью Canvas, на сервер, а затем получите изображение в формате PNG (jpg) с сервера. Этот подход более проблематичен, и нам нужно найти способы улучшить его позже.

Проблема 4. Изображения, загруженные на сервер, сильно сжаты.

Решение: загруженные изображения будут иметь на сервере несколько ресурсов с разными уровнями сжатия. Изображения с более четкими пикселями можно получить из каталога «http://img10.360buyimg.com/promotepic/».

Вопрос 5: Длительное нажатие на нарисованную ссылку с QR-кодом (//wqs.jd.com/xxx) не позволяет напрямую перейти на страницу.

Решение: При указании отображаемой ссылки на QR-код необходимо добавить http:, иначе QR-код будет распознан как текст.

 // часть кода для рисования на холсте: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = new Image, Canvas = document.createElement(canvas), ctx = Canvas.getContext(2d), //См. вопрос 2 о фоновом агенте nigix src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; //Чтобы решить проблему невозможности чтения междоменного toDataURL холста, см. вопрос 1 img.crossOrigin = Anonymous; //Предварительная загрузка ресурсов изображения img.onload = function() { Canvas.width = img.width; Canvas.height = img.height; ctx.drawImage( img, 0, 0 ); // Нарисованное изображение base64 localStorage.setItem( saveImageData, Canvas.toDataURL(image/png) } img. источник;

Часть кода для загрузки картинок:

 // См. вопрос 3 для загрузки изображений $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', содержимое: base64pic, active:shotpic20160901 }, dataType: 'json', xhrFields: {withCredentials: true }, Success: function(data) { if (picdata.id == 1 && picdata.msg) { //Путь к изображению этого пути префикса: самый См. вопрос 4 для ясности var imgPre = 'http://img10.360buyimg.com/promotepic/'; //Ссылка на полный адрес для объединения адресов изображений var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //для выполнения бизнес-логики}; ,фото } }, ошибка:функция(данные){ }});

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