当前栏目
vue上传图片并生成海报
用到的插件:vue-cropper(裁剪) vue-canvas-poster(生成海报),最终合成海报调用裁剪插件方法getCropBlob,利用canvas画出海报。
需求说明:默认有个海报缩略图展示,有模版可供选择,同时可替换缩略图中的模版,用户可以上传图片更换背景,用户可以输入个人信息并显示在海报上。主要分三层:1.上传背景图 2.模版 3.用户信息
前期探索:首先找到插件vue-canvas-poster,官网文档地址:https://sunniejs.github.io/vue-canvas-poster/#/README 传入参数也简单,没有复杂的事件。尝试了下和需求有点不同,主要体现在用户可以多次更改上传图片并 合成海报,改插件的相对局限。初始化painting传入参数就能生成海报,多次更改图片再次合成时,就显得捉襟见肘,想到通过变量控制组件的显示,来以此重绘组件达到多次渲染的效果。但是尝试了下不起作用,后期会继续尝试。但是该插件生活海报清晰度上还是比较满意的。于是乎再次踏上寻找插件的过程,在git上无意中看到一位大神写的demo和我的需求很相近,就clone下代码开始了研究,git地址:https://github.com/huugle/vue-poster。需要配合vue-cropper使用。vue-cropper地址:https://github.com/xyxiao001/vue-cropper
开发:1.vue-cropper传入的参数对应上传图片,即默认示例和用户上传的图片,vue-canvas-poster对应用户输入信息,改组件成功回调会返回base64,把值赋给其中一个img标签,改img定位缩略图上,使用户信息能很好贴合模 版。
2.另外需要一个img承载模版图片,也要定位到缩略图上。这样缩略图容器包含:一个用户信息base64的img,一个模版img,还有个vue-cropper用来承载上传图。
3.中间选择模版判断生成海报按钮状态省略。
4.上传图片部分逻辑如下:
5.生成海报逻辑如下:
总结:尽量不要在插件上额外加样式,可能会影响到图片的裁剪样式。写的比较苍茫,有时间会继续深入研究。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件