有个挺好用的插件能很好地实现vue生成海报图,虽然有一定的限制,但基本需求还是能实现的

1.安装

npm i vue-canvas-poster --save

2.全局配置

// or Global Install
import Vue from 'vue'
import vueCanvasPoster from 'vue-canvas-poster'
Vue.use(vueCanvasPoster)
或者按需引入  
import vueCanvasPoster from 'vue-canvas-poster'

components: {
vueCanvasPoster
}

  

3.使用

<vue-canvas-poster :painting="painting" @success="success"></vue-canvas-poster>

详情参考链接------https://segmentfault.com/a/1190000019975772

我只是代码的搬运工

vue使用canvas生成海报图的更多相关文章

  1. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  2. canvas生成海报

    虽然之前也做过类似的生成海报的项目,但是这个项目我又网上查找了一下,发现一个插件挺好用的  html2canvas.js http://html2canvas.hertzen.com/这里可以下载这个 ...

  3. C#自定义TemplateImage使用模板底图,运行时根据用户或产品信息生成海报图(1)

    由于经常需要基于固定的一个模板底图,生成微信小程序分享用的海报图,如果每次都调用绘图函数,手动编写每个placeholder的填充,重复而且容易出错,因此,封装一个TemplateImage,用于填充 ...

  4. 小程序canvas生成海报保存至手机相册

    小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...

  5. js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  6. 微信小程序分享之生成海报--canvas

    首先看文档 了解知识点~~(https://developers.weixin.qq.com/miniprogram/dev/component/) githup:https://github.com ...

  7. 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  8. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  9. 微信公众号生成海报(uniapp)

    前言 这几天接到一个需求,要在公众号内生成分享海报.之前有做过H5和小程序的,心想直接复制过来就行了.没想到踩了不少的坑,搞了好几天终于搞好了,特此分享一下,希望能对大家有所帮助. 效果图 代码实现 ...

随机推荐

  1. 使用vue 3.0 初始化vue脚手架

    vue-cli3.0安装 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g 安装 npm install -g ...

  2. 【bzoj2073】【[POI2004]PRZ】位运算枚举子集的特技

    (上不了p站我要死了) Description 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上的人都不能超过一 ...

  3. php日志托管给apache处理

    php.ini配置: log_errors = On;不显示错误display_startup_errors = Offdisplay_errors = Off ;除了notice级别错误外,报告所有 ...

  4. 多项式总结(unfinished)

    试试以二级标题为主的格式. 多项式相关 注:本篇博客不包含\(FFT\)基础姿势.如果您想要阅读本篇博客,请确保自己对\(FFT,NTT\)有基本的认识并且能够独立写出代码. 多项式是什么? 左转数学 ...

  5. 高级软件测试技术(测试管理工具实践day1)

    今天进行了班级内部各小组选择测试工具,选择各自需要进行测试管理工具.我们小组暂定选择 禅道 但是班级内其他小组选择的工具还没确定,还没进行

  6. canvas 方块旋转案例

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...

  7. view组件

    view标签的属性值: hover-class:按下的点击态       属性值:字符串 如果:hover-class="none" 按下就没有点击态 hover-stop-pro ...

  8. linux的find和grep区别?

    为什么会把 grep和find 这两个命令拿在一起来讨论? 是因为他们之间有一个容易混淆的地方, [在我的记忆中] : -name ? 它是find的选项! 不是grep的选项! 实际上, find基 ...

  9. linux压缩文件命令-zip

    首先cd到要压缩文件的目录,然后使用zip命令压缩文件 zip -r importExcel.zip importExcel -r表示递归 zip [参数]  [打包后的文件名]  [打包的目录路径] ...

  10. mysql的小练习

    建立如下表: 建表语句: class表创建语句 create table class(cid int not null auto_increment primary key, caption varc ...