Введение
Сегодня я поделюсь небольшим трюком для создания водяных знаков в небольшой программе.canvasНарисуйте фоновое изображение, далее я расскажу о деталях рисунка. Я надеюсь, что студенты, разработавшие мини-программы WeChat, смогут собрать статьи, чтобы, если в будущем они столкнутся с подобными потребностями, они могли использовать их для справки.
Плагины в этой статье также применимы к небольшим программным проектам, созданным Taro, uniapp, native и т. д.demoсостоит в том, чтобы принятьTaro-VueСтроить.
Давайте сначала посмотрим на демонстрационный эффект.
Два принципа реализации
Принцип рисования фонового изображения на холсте по сути очень прост, так же просто, как положить слона в холодильник и разделить его на три этапа.
-
Первым делом нужно открыть дверцу холодильника, потому что эта функция реализована в передней части и нарисована холстом, поэтому нам нужна базовая конфигурация плаката, напримерШирина и высота постера на холсте,текстовое содержание,цвет текста,Угол поворота текста постераЖдать.
-
Второй шаг — поместить слона 🐘, настроить холст и нарисовать базовую карту водяного знака.
Итак, вопрос в том, является ли базовая карта, которую мы рисуем, всей базовой картой водяного знака?
ответ отрицательный.我们只需要画一个模版图片就可以了，如下图所示：
Но чтобы водяной знак заполнить весь экран телефона, нам нужно изображение водяного знака в качестве фонового изображения, а затем установитьbackground-repeat:repeat;Вот и все.
- Третий шаг — закрыть дверцу холодильника, мы можем заполнить весь экран изображением, сгенерированным холстом.
Три подробные реализации
демонстрационный шаблон
шаблон холстаДалее мы начинаем реализовывать конкретные детали. Сначала мы помещаем страницу в<canvas>.
<view
class="markBox"
:style="{ backgroundImage: `url(${url})` }"
>
<canvas
v-show="isShow"
:id="settings.id"
type="2d"
:class="settings.id"
:style="{ width:settings.width + 'px' , height : settings.height + 'px' }"
/>
</view>
-
Здесь стоит отметить, что мы установили
type = '2d'лучше не использоватьcanvasIdспособ работыcanvas, включая получение экземпляра холста, вызовcanvasToTempFilePathapi и т. д., иначе может произойти сбой. Используемый здесь метод заключается в получении экземпляра холста по идентификатору. -
Когда мы закончим рисовать, спрячьте
canvas, Установите контейнер представления в качестве фонового изображения, которое представляет собой изображение, нарисованное холстом. -
canvasширина и высота зависят отcanvasЭлемент конфигурации добавлен, поэтому нам нужно динамически использоватьstyleсвойство устанавливает ширину и высоту.
элемент конфигурации
export default {
/* 前端生成水印 */
name:"MakeWaterMark",
data(){
return {
isShow:true,
url:'',
settings: {
'id': 'waterMark', /* canvas id */
'content': '我不是外星人', /* 水印内容 */
'width': 200, /* 图片/canvas 宽度 */
'height': 200, /* 图片/canvas 高度 */
'rotate': -45, /* 水印文案旋转角度*/
'left':60, /* 水印文案相对图片水平偏移量 */
'top':80, /* 水印文案相对图片垂直偏移量 */
'fontSize': '15px', /* 水印文字大小 */
'fontFamily': 'Microsoft JhengHei', /* 水印文字样式 */
'bg': '#fff', /* 图片背景颜色 */
'color': '#ccc', /* 水印文字颜色 */
'fontWeight': 'normal', /* 水印文字宽度 */
}
}
},
}
обработка стиля
.markBox{
position: fixed;
left:0;
right:0;
bottom: 0;
top:0;
background-repeat:repeat ;
}
- Установите стиль для внешнего контейнера, чтобы изображение водяного знака размещалось на всей странице.
Основной код плагина
Основная функция плагина заключается в создании изображений водяных знаков в дополнение к двум требованиям:
- Сам плагин имеет низкую связь со страницей/компонентом. Сам плагин можно использовать в любом компоненте.
- Плагин не ограничен платформой построения, то есть его можно использовать как в нативном апплете WeChat, так и в
Taro,uniappи другие используемые инструменты сборки.
Далее мы рассмотрим конкретные детали:
function createPromise(callback){
return new Promise((resolve,reject)=>{
callback(resolve,reject)
})
}
/**
* 制作水印图片
*/
class MarkwaterMark{
constructor(options){
/* 初始化配置 */
this.platform = null
this.pixelRatio = null
this.context = null
this.options = options
this.ready = createPromise(this._init.bind(this))
/* 生成组件方法 */
this.make = (cb) => {
if(this.context){
this._markPicture(cb)
}else{
this.ready.then(()=>{
this.context && this._markPicture(cb)
})
}
}
}
/* 初始化方法 */
_init(next,fail){
const { platform , pixelRatio } = wx.getSystemInfoSync()
this.platform = platform
this.pixelRatio = pixelRatio
const query = wx.createSelectorQuery()
query.select('#' + this.options.id ).fields({
node: true,
size: true
}).exec((res)=>{
let {
node,
} = res[0] || {}
if (!node) return fail && fail()
this.context = node.getContext('2d')
this.node = node
next()
})
}
/* 制作水印图片 */
_markPicture(cb){
const { width , height , bg ,color ,fontSize, fontFamily,fontWeight ,content , left, top ,rotate } = this.options
this.node.width = (width || 200) * this.pixelRatio
this.node.height =( height || 200) * this.pixelRatio
this.context.scale(this.pixelRatio,this.pixelRatio)
this.context.fillStyle = bg || '#fff'
this.context.fillRect(0, 0, width, height)
this.context.fillStyle = color || '#000'
this.context.save()
this.context.translate(left,top)
this.context.rotate(Math.PI * rotate / 180 )
this.context.font = `${fontWeight} 400 ${fontSize} ${fontFamily}`
this.context.fillText(content, 0, 0)
this.context.restore()
this._savePicture(cb)
}
/* 生成图片 */
_savePicture(cb){
const { width , height } = this.options
wx.canvasToTempFilePath({
x:0,
y:0,
width,
height,
destWidth:width*1,
destHeight:height*1,
canvas:this.node,
success:function(res){
cb && cb(res.tempFilePath)
}
})
}
}
/**
*
* @param {*} options 配置项
*/
function makeWatermark(options){
if(!wx) return null
return new MarkwaterMark(options)
}
module.exports = makeWatermark
Анализ основных функций:
-
Шаг 1: Откройте интерфейс makeWatermark, вы можете создать экземпляр
MarkwaterMarkObject, в процессе инстанцирования сначала настраивается на начальное распознавание, и оборачивается слой Promise для создания картинки. Поскольку многие методы в операции холста являются асинхронными, метод createPromise используется для прокси уровня Promise. -
Шаг 2: На объекте MarkwaterMark есть
makeметод, получит экземпляр холста, затем установит ширину, высоту и коэффициент масштабирования холста холста и нарисует холст водяного знака. -
Шаг третий: поставить
canvasпройти черезcanvasToTempFilePathИнтерфейс преобразует холст во временное изображение и передает путь к временному изображению бизнес-компоненту или странице в форме обратного вызова.
использование плагина
В бизнес-компоненте (демонстрация выше) мы можем использовать вышеуказанный плагин. Конкретная ссылка выглядит следующим образом:
mounted(){
Taro.nextTick(()=>{
/* 创建一个 makeWatermark 对象 */
const marker = makeWatermark(this.settings)
/* 调用make，生成图片 */
marker.make((url)=>{
/* url 为临时路径 */
const fileManage = Taro.getFileSystemManager()
let base64 = 'data:image/jpg;base64,' + fileManage.readFileSync(url,'base64');
this.url = base64
this.isShow = false
})
})
},
Важные детали:
Еще одна важная деталь здесь заключается в том, что фоновые изображения в апплете, как правило,это сетевая картинкаилиизображение base64, изображения временного пути не отображаются на реальной машине. Для решения этой проблемы,Нам нужно преобразовать временное изображение в изображение формата base64..
- пройти через
getFileSystemManagerотbase64способ получить доступ к только что сгенерированному временному изображению, а затем вернуться к формату base64, затем вы можете установить изображение base64 в качестве фонового изображения.
Эффект:
Готово! ! !
Четыре резюме
Благодаря этой статье мы узнали о пути и процессу генерирующих водяных знаков в мини-программах Wechat. Есть еще некоторые детали развития. Заинтересованные студенты могут собрать их для чрезвычайного использования.
Я написал буклет для глубокого и систематического изучения React.
Чтобы каждый мог систематически изучать React и продвигать его, автор недавно написал буклет «Руководство по расширенной практике React».Базовый Расширенный,Оптимизация и расширенные статьи,Расширенные принципы,Продвинутая экология,Продвинутая практика, пять направлений, чтобы подробно обсудить руководство по использованию React и введение в принципы.
-
существуетБазовый РасширенныйЗдесь мы заново поймем состояние, свойства, ссылку, контекст и другие модули в реакции и подробно объясним их основное использование и игровой процесс высокого уровня.
-
существуетОптимизация и расширенные статьиВ этом уроке мы расскажем о настройке производительности React и подробной обработке, чтобы React можно было написать более элегантно.
-
существуетРасширенные принципыВ этой статье я подробно расскажу о принципах нескольких основных модулей React и решу проблемы принципов React в разовых интервью.
-
существуетПродвинутая экологияЗдесь мы рассмотрим использование ключевой экологии React и проанализируем внутренний механизм работы с принципиальной точки зрения.
-
существуетПродвинутая практикаЗдесь первые несколько модулей будут соединены последовательно для интенсивной практики.
Что касается того, почему буклет называется Advanced Practice Guide, потому что, объясняя расширенный игровой процесс, он также содержит множество небольших демонстраций для практики. В интервью также есть несколько сессий вопросов и ответов, чтобы читатели выделялись из интервью.
В настоящее время и после завершения первых 22 глав буклет будет запущен в ближайшее время.Те, кто хочет продвигать React, могут зайти сюда и обратить внимание на последние новости буклета.
Напоследок подарите розы и оставьте в руках стойкий аромат.Друзья, которые чувствуют, что что-то приобрели, могут подарить авторуНравится, следуйОдна волна, обновляйте фронтальные суперхардкорные статьи одну за другой.