Подробное объяснение обмена плакатами на холсте HTML5 в WeChat (личная яма для скалолазания)

В этой статье рассказывается о совместном использовании плакатов WeChat и о том, как поделиться ими со всеми. Подробности следующие:

1. Случайно сгенерировать картинку
2. Получите аватар и имя пользователя WeChat (настройте внутренний интерфейс, чтобы получить его)
3. Объедините аватар и заголовок пользователя со случайно сгенерированным изображением в постер.
4. Возможно, пользователь на предыдущей странице также заполнил текст пожелания, который необходимо заполнить и на картинке.

1. Canvas недействителен при длительном нажатии в браузере WeChat, и его нельзя использовать, как img (тогда я конвертирую его в img)
2. После конвертации в img его можно отобразить в инструментах разработчика WeChat, но на реальном устройстве он не будет работать (хочет плакать, но без слез. Ду Ньянг сказал, что изображение может быть междоменным ^-^).
3. Синтез аватара пользователя также требует закругленных углов. Я сказал «нет», поэтому просто посмотрел документацию по Canvas API. Мне не нравится Ду Нианг.
4. Если текст на холсте превышает указанную ширину, его необходимо обернуть. Я знаю только различные методы выравнивания текста, которые не превышают указанную ширину ctx.textAlign = 'center';
5. Проблема размытия холста на экране высокой четкости (это очень просто, я не знаю, почему Ду Нианг такой многословный) не в Canvas.witdt=innerWidth*devicePixelRatio

 <div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <стиль> * { поля: 0; дополнение: 0; } тело, HTML { ширина: 100%; высота: 100% } .imgBox { ширина: 100%; высота: 100%; отображение: блок </style>

сценарий

 // Основная структура js new Vue({ el:'imgBox', data:{ urlParam: {}, //Получаем объект значения по URL-адресу randomNum: 1, //Случайное число используется для определения того, какая страница благословения userName: '' ,//Имя пользователя imgSrc: '',//Синтезированное окончательное изображение userImg: '',//Картинка аватара пользователя userMessage: '',//Сообщение пользователя}, методы: { // Поделитесь с друзьями wxShareFriends: function () {}, // Заголовок запроса инициализации wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }); // Получаем случайные числа [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Получаем аватар и титул пользователя WeChat, а также слова благословения пользователя getUserInfo() { var vm = this; $.post('Адрес запроса API' , функция (данные) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= 'Когда мы встречаемся в мире смертных, мы стареем. Время прошло. Встреча друг с другом в мире смертных - это тонкое и священное дело.' else { vm.userMessage = 'Встречаемся в мире смертных, мы стары' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Получаем dpr и ширину страницы getWindowInfo() { var windowInfo = {}; if (window.innerWidth) { windowInfo.width = window.innerWidth } else { windowInfo. ширина = document.body.clientWidth } return windowInfo }, // Нарисуйте большое фоновое изображение для публикации на странице активности drawCanvasBgImg () {}, // Вырезаем круг на холсте фонового изображения и заполняем его аватаром пользователя drawCanvasUserImg(canvas, ctx, dpr) {}, // Заполняем в имени пользователя или сообщении пользователя CanvasFillText (canvas, ctx, dpr, CircleR) {}, // Синтезируем общее 64-битное базовое изображение ConvertCanvasToImage (canvas) { this.imgSrc = Canvas.toDataURL(image/jpeg);//png является ядовитым, а QR-код не может быть распознан на Android и не может быть перенаправлен this.$Spin.hide() } }});

1. drawCanvasBgImg()
2. drawCanvasUserImg (холст, ctx, dpr)
3. CanvasFillText (холст, ctx, dpr, кругR)
4. ConvertCanvasToImage (холст)

 //После получения данных начнем рисовать фоновое изображение. Идея очень проста: нарисуйте изображение на холсте, затем нарисуйте на нем текст аватара и преобразуйте его в img drawCanvasBgImg () { var vm = this; = document.createElement(canvas); var ctx = Canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//Получить ширину экрана для адаптивного мобильного экрана по ширине холста var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** Псевдоним кажется бесполезным, я не знаю, используется ли он не в том месте** Canvas.width = dpr * clientWidth; //Из-за экрана мобильного телефона. При использовании экрана Retina он будет отображаться несколько раз. Используйте dpr для динамической установки ширины и высоты холста, чтобы избежать размытия изображений. 375;//Удаление строки состояния в заголовке WeChat должно быть 603. Я не понимаю, что 603 по-прежнему не может заполнить экран изображениями, поэтому я добавил его в 609. var img = new Image(); crossOrigin = ''; // Изображение мертвой ямы пересекает домен (img.crossOrigin = Anonymous все еще не может отображать изображения в формате base64) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr }},

 // Вырезаем круг на холсте фонового изображения и заполняем его аватаром пользователя drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var CircleR = 50 * dpr; // Radius var CircleX = Canvas. width / 2 ;//X-координата центра круга var CircleY = 50 * dpr;//Y-координата центра круга var imgX = CircleX - CircleR;//Начальная координата изображения X var imgY = кругY - кругR;//Начальная координата изображения Y var imgWidth = 2 * CircleR;//Размер изображения соответствует окружности var img = new Image(); img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); // Сохраняем текущее состояние ctx ctx.arc(circleX, CircleY, CircleR, 0, 2 * Math.PI); //Рисуем круг ctx.clip(); //Обрезаем круг над ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); //Рисуем только что обрезанный круг ctx.restore () ; // Восстанавливаем состояние vm.canvasFillText(canvas, ctx, dpr, CircleR }},

 // Введите имя пользователя или сообщение пользователя CanvasFillText (canvas, ctx, dpr, CircleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0 // Имя пользователя, координата оси Y var; userMessageX = dpr * 40; //координата пользовательского сообщения по оси X var userMessageY = 0 //координата пользовательского сообщения по оси Y var LastSubStrIndex =; 0;//Индекс строки var lineWidth = 0;//Ширина одной строки var allTextWidth = 0;//Ширина всех символов ctx.font = fontSizeThis; // Для записи имени пользователя требуется имя пользователя if (this.userName) { userNameY = CircleR * 2.5; ctx.fillStyle = # ctx.textAlign = 'center'; Canvas.width / 2, userNameY } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; // Получаем ширину символа для (var i = 0; i < this.userMessage). . length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width }; Если длина строки больше, чем область холста, перенесите строку if (allTextWidth > Canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. MeasureText(this.userMessage[i]).width; if (lineWidth > Canvas.width - 2*userMessageX) { ctx.textAlign = 'left'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25; //Установить высоту строки lineWidth = 0; LastSubStrIndex = i; } if (i == this.userMessage. длина - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), пользовательское сообщение},

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