Ла-ла-ла, давайте сначала поговорим о требованиях. Продукт хочет, чтобы пользователи делились изображением в WeChat, QQ и других платформах в нашем приложении. Изображение содержит имя пользователя, аватар и QR-код с собственной информацией. Тогда как создать этот плакат~~~
Прежде всего, наш начальник рассказал мне, что существует плагин html2canvas. Его функция — конвертировать узлы DOM в изображения, и это хорошо. Я протестировал его, и он работает, но ~ этот плагин немного великоват. Представлять такую большую вещь для удовлетворения потребностей плакатов - это потеря! ! ! Так что, лучше я нарисую его сам~
Во-первых, рендеры
Dangdangdangdang~~~Конечный созданный плакат включает в себя аватар, имя и QR-код. Конечно, QR-код на картинке — это QR-код Baidu~ Наконец, создается base64 для распространения на основных платформах.
Без лишних слов, вот код (я не компилировал этот код, потому что мне лень...)
<canvas id=myCanvas width=750 height=1200 style=border:1px Solid #d3d3d3;background:#ffffff;></canvas>
Узел DOM очень прост: просто создайте тег Canvas и напишите некоторые атрибуты по своему усмотрению~
var Canvas = document.getElementById(myCanvas); //Получаем функцию узла холста imageToCanvas(canvas,url1,url2,code) { //Передаем фоновое изображение узла холста url1 аватара url2 Код QR-кода var ctx = Canvas.getContext(2d ) ; var img1 = new Image(); img1.src = url1 //Я не буду объяснять предыдущий, генерируем изображение img1.onload =; function(){ ctx.drawImage(img1,0,0); //Когда изображение загружается, оно присваивается холсту, начиная с 0 0; var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //сохраняем текущее состояние холста ctx.arc(374, 134, 44, 0, 2 * Math . PI); //Операция вырезания разрезает квадратный аватар на круг //Вырезаем круг из холста ctx.clip(); //Обрезать ctx.drawImage(img2, 330, 90, 88, 88); //Поместить img2 в координаты 330 90 с размером 88 ctx.restore(); //Освободить состояние холста ctx.font=28px Arial ctx; textAlign = центр ctx.fillStyle = '#FFFFFF'; //Предыдущий шаг – установить центральный атрибут text ctx.fillText(ваше имя — Shenma, 375,220). //Текст здесь жестко запрограммирован. На практике передача большего количества параметров вполне допустима var img3 = new Image(); ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478 //Аналогично добавляем изображение var imgCode); = ConvertCanvasToImage(canvas); //Преобразуем изображение в base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //Функция инициализации ConvertCanvasToImage(canvas) { var image = new Image(); //Преобразуем холст в возвращаемое изображение img;}Таким образом вы можете получить base64 и затем использовать его.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.