mq-photo-text-edit v0.1.2

photo text

基于 canvas 的纯前端的图片文字编辑器

online Demo

example1:

import ImageTextEdit from 'mq-photo-text-edit';
var ImageTextEditData = new ImageTextEdit({
    el: 'demo_container',
    width: 700,
    height: 400,
    image: 'https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    imageName: 'test',
    textName: '测试',
    originPosition: {x: 313.69, y: 374.0458015267176},

})
setTimeout(()=> {
    ImageTextEditData.save('base64').then(res=> {
        console.log(res)
    })
}, 3000)

example2 :

import ImageTextEdit from 'mq-photo-text-edit';
var ImageTextEditData = new ImageTextEdit({
    el: 'demo_container',
    width: 700,
    height: 400,
    image: 'https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    imageName: 'test',
    rotate: 60,
    textNames: [{
        textName: '测试11',
        originPosition: {x: 313.69, y: 374.0458015267176},
        textColor: '#000',
        fontSize: 14,
    },{
        textName: '测试22',
        originPosition: {x: 313.69, y: 374.0458015267176},
        textColor: '#000',
        fontSize: 14,
    }],
    originPosition: {x: 313.69, y: 374.0458015267176},

})

启动 demo

# 安装依赖
npm run i
# 运行项目
npm run dev