В настоящее время существует множество операций с общедоступными учетными записями WeChat, и существует необходимость создания изображений. После того, как изображения созданы, их можно отправлять друзьям и распространять в «Моментах», что способствует продвижению продукта!
1. Для генерации изображений можно использовать холст, но поскольку уже существует библиотека с открытым исходным кодом под названием html2canvas, я не стал писать ее сам, чтобы сэкономить время.
Адрес github: html2canvas
Хватит болтать, давайте сначала посмотрим на вещи! ! !
LiveDemo
/** * Получаем соотношение пикселей на основе window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; return 1 } /** * Преобразуем входящие данные; значение — целое число*/ function parseValue(value) { return parseInt(value, 10 }); Нарисуйте холст */ async function drawCanvas (selector) { // Получаем узел DOM, который вы хотите преобразовать const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); Узел DOM const width = parseValue(box.width); const height = parseValue(box.height); // Получаем соотношение пикселей const ScaleBy = DPR(); Создайте собственный элемент холста var Canvas = document.createElement('canvas'); // Установите ширину и высоту атрибута элемента холста равным ширине и высоте узла DOM * соотношение пикселей холст.ширина = ширина * холст.высота = высота *; ScaleBy // Устанавливаем ширину и высоту CSS холста равным ширине и высоте узла DOM Canvas.style.width = `${width}px`; `${height}px`; // Получаем кисть const context = Canvas.getContext('2d'); // Увеличиваем все содержимое рисования по соотношению пикселей context.scale(scaleBy, ScaleBy); let x = width; = высота; return await html2canvas(dom, {canvas}).then(function () { ConvertCanvasToImage(canvas, x,y) }) } /** * Преобразование изображения в формат base64*/ function ConvertCanvasToImage(canvas, x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; let _body = document.getElementsByTagName('body' ) [0]; изображение.ширина = х; изображение.высота = y; Canvas.toDataURL(изображение/png); _body.removeChild(_container); document.body.appendChild(изображение); } drawCanvas('.container')2. Поскольку все современные мобильные телефоны оснащены экранами высокой четкости, если не выполнять какую-либо обработку, появится размытие. Почему происходит размытие? Это включает в себя соотношение пикселей устройства. DevicePixelRatio js предоставляет window.devicePixelRatio для получения соотношения пикселей устройства.
функция DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1;Эта функция DPR предназначена для получения соотношения пикселей устройства. Итак, что нам делать после получения соотношения пикселей?
var Canvas = document.createElement('canvas'); // Установите ширину и высоту атрибута элемента холста как ширину и высоту узла DOM * соотношение пикселей. Canvas.width = width * ScaleBy; Canvas.height = height * ScaleBy // Установить; Canvas Ширина и высота CSS — это ширина и высота узла DOM Canvas.style.width = `${width}px`; Canvas.style.height = `${height}px` // Получить кисть const context = Canvas.getContext('2d'); // Увеличить все содержимое рисунка по соотношению пикселей context.scale(scaleBy, ScaleBy);3. Получив соотношение пикселей устройства, умножьте Canvas.width и Canvas.height на соотношение пикселей устройства, которое в данный момент равно ScaleBy, установите значения Canvas.style.width и Canvas.style.height на ширину и высоту изображения; дом. Подумайте, зачем вы это пишете? Наконец, при рисовании нарисованный контент увеличивается на соотношение пикселей.
Например, ширина и высота устройства iPhone 6S составляют 375. Поэтому, если вы нарисуете его один в один, на экране высокой четкости он будет размытым. Просто посмотрите на картинку и расскажите историю.
6плюс ДНР=3
4. Наконец, вызовите Canvas.toDataURL(image/png); присвойте значение image.src. Поскольку изображения не могут быть сохранены в WeChat, вы можете только создавать файлы изображений и вызывать собственную функцию длительного нажатия WeChat для сохранения изображений в альбомы. как показано на рисунке:
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.