VUE生成图片(自定义文字)

newImage (text) {var canvas = document.createElement('canvas') //准备空画布var cxt = canvas.getContext("2d")var img = new Image()img.src = require('@/assets/images/Starry.jpg')// 图片加载完成，才可处理img.onload = () => {// 画图(这里画布与图片等宽高)cxt.drawImage(img, 0, 0)// 设置字体大小cxt.font = "100px Microsoft YaHei"// 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式cxt.textBaseline = 'middle'cxt.textAlign = 'center'// 距离左边的位置var left = canvas.width / 2// 距离上边的位置 (图片高-文字距离图片底部的距离)var top = 80// 文字颜色cxt.fillStyle = "#ffffff"// 文字在画布的位置cxt.fillText(text, left, top)this.imgTextUrl = canvas.toDataURL("image/jpg")sessionStorage.setItem("imgTextUrl",this.imgTextUrl)}
},

VUE生成图片(自定义文字)相关推荐

vue实现【echarts中 “7种” Bar柱状图图例】实现人格画像组件的封装，并在柱状条显示label自定义文字
图例一: 图例二: 图例三: 图例四: 图例五: 图例六: 图例七: 一.安装echarts npm install echarts --save 二.在需要的页面引入 import * as ech ...
❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备
元旦节快到了,在跨年夜前夕.是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ❤元旦节表白3D相册,在元 ...
vue实现自定义身份证，数字键盘（光标，输入框，键盘）
vue实现自定义身份证,数字键盘(光标,输入框,键盘) 组件介绍组件代码效果图组件使用引用使用参数介绍方法插槽组件介绍 vue实现自定义身份证键盘(光标,输入框,键盘全手写) 组件代 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
Vue的自定义滚动，我用el-scrollbar
弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的--)链接地址:Front-End-Basics 此篇文章的地址:Vue的自定义滚动,我用el-scrollbar 基础笔 ...
PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法,php/thinkphp实现微信分享自定义文字和图片...
PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法, php/thinkphp实现微信分享自定义文字和图片. 一.先看微信JS-SDK文 ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...
Flutter RichText支持自定义文字背景
extended text 相关文章 Flutter RichText支持图片显示和自定义图片效果 Flutter RichText支持自定义文本溢出效果 Flutter RichText支持自定义文 ...
php生成图片水印,PHP生成图片加文字及图案水印办法
工作中,各种语言都要会,但不是各种语言都记到脑子里,常常要查字典.查手册.以及百度对于PHP生成图片加文字及图案水印这项技巧,好久没有用,又有些生疏了,现在来温故知新,加深记忆! 代码如下: //P ...

VUE生成图片(自定义文字)

VUE生成图片(自定义文字)相关推荐

最新文章

热门文章