最新公告
  • 欢迎您光临IO源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • VUE+Canvas实现输入文字生成对应的字体图片小功能

    原理哔哔:

    div class=’wrapper ‘

    text area name= ‘ ‘ v-model= ‘ msg ‘/text area

    选择name=” v-model=’font ‘

    期权价值= ‘ 微软雅黑’ 微软雅黑/期权

    期权价值= ‘ 宋体’ 宋体/期权

    /select

    输入类型= ‘ number ‘ name= ‘ ‘ v-model= ‘ font size ‘/

    输入类型= ‘ color ‘ name= ‘ ‘ v-model= ‘ FontCor ‘/

    button @ click= ‘ creatmg ‘ generate/button

    div class=’fontimg ‘

    img id= ‘ imgbox ‘ : src= ‘ https://www . 902d.com/IMgsrc ‘/

    /div

    /div

    脚本类型=’text/javascript ‘

    var app=new Vue({

    el: ‘。包装 ‘,

    数据:{

    Msg: ‘您好,这里是测试的内容’,

    字体: ‘ 微软’,雅黑

    fontSize: ‘ 18 ‘,

    fontCor:’#000000 ‘,

    imgSrc:’ ‘

    },

    methods:{

    creation mg: FuncTion(){

    this.drawLogo(this.msg,this . font);

    },

    drawLogo:函数(文本、字体){

    //创建画布

    let canvas=document . CreateElement( ‘ canvas ‘);

    //绘制文本环境

    let context=canvas . GetContext( ‘ 2d ‘);

    //设置字体

    context.font=font

    //获取字体宽度

    让width=context.measureText(text)。宽度;

    //如果宽度不是240。

    if(宽度240) {

    宽度=600;

    } else {

    宽度=宽度30;

    {}

    //画布宽度

    canvas.width=width

    //画布高度

    canvas.height=80

    //填充白色

    context.fillStyle= ‘ # ffffff

    //在绘制文本之前填充白色

    context.fillRect(0,0,canvas.width,canvas . height);

    //设置字体

    context . font=this . font size ‘ px ‘ font;

    //设置水平对齐方式

    context.textAlign= ‘ center

    //设置垂直对齐方式

    context . TextBaseline= ‘ middle ‘;

    //设置字体颜色

    context . FillStyle=this . FontCor;

    //绘制文字(参数:待写文字,x坐标,y坐标)

    context.fillText(text,canvas.width/2,canvas . height/2);

    //生成图片信息

    让DataURL=canvas . TotaToul( ‘ image/png ‘);

    this.imgSrc=dataUrl

    返回dataUrl

    },

    {}

    })

    /script

    经常浏览字体网站,会发现他们的“字体生成器”和预览功能很好奇。为什么在输入框中输入文字后点击预览,下面会修改相应的字体内容,这样就可以预览字体效果而不用安装字体了?

    这样不需要引入太多字体就可以实现小功能,只需使用大家电脑都有的字体:雅黑和宋体自己测试更多效果!哈哈哈,vue真的很适合单页开发,比jquery轻很多。

    并编写HTML布局

    如下图:案例中,我将文本内容、字体类型、字号、颜色设置成一个允许用户自定义修改的表单,然后通过按钮点击事件绑定生成器方法,最后生成的图片绑定到img的src属性。

    2.绑定vue元素,设置数据的初始数据,实现功能:

    其实这个功能并不难,原理很简单,就是通过js动态修改字体样式,然后用canvas渲染字体,替换图片的src路径,从而达到我们想要的目的。我没有使用原生js或jquery快速实现功能,而是直接使用VUE的表单双向绑定特效来实现

    1.介绍https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js武夫档案

    实现步骤:

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!384324621@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有★币奖励和额外收入!

    IO 源码网 » VUE+Canvas实现输入文字生成对应的字体图片小功能

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    IO源码吧
    一个高级程序员模板开发平台

    发表评论

    • 75会员总数(位)
    • 10312资源总数(个)
    • 81本周发布(个)
    • 0 今日发布(个)
    • 378稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情