基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报

概述

客户需求,需要一个用户自己上传图片,功能不大,思路得清楚,前背景不动,后背景(用户上传的图片)可以移动,缩放,最后根据用户缩放图片的把整个页面绘制成海报,上传服务器,用户可以保存。页面不多,没有引入UI库,有用到的可以参考看一下

详细

客户需求,需要一个用户自己上传图片,功能不大,思路得清楚,前背景不动,后背景(用户上传的图片)可以移动,缩放,最后根据用户缩放图片的把整个页面绘制成海报,上传服务器,用户可以保存。页面不多,没有引入UI库,有用到的可以参考看一下。

next文件有线上的代码,把

depro

字短设置false和true,可以切换本地测试,还是线上用户自己上传图片

html2canvas针对线上的图片,本地测试存在跨域问题

全demo一共四个页面

演示图(引导页):

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第1张图片

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第2张图片

演示图(上传,拖拽,裁剪,生成海报)

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第3张图片

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第4张图片

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第5张图片

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第6张图片

基于vue实现的拖拽,缩放,前背景不动,后背景移动,绘制成分享海报_第7张图片

部分代码:

index


 

 

form页面


 

 

程序可以理解成一个活动demo,有需要的可以参考一下

你可能感兴趣的:(前端,vue.js,javascript,ecmascript)