vue 生成海报并下载

用到插件    vue-canvas-poster 

具体的使用方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

html:   <vue-canvas-poster         :widthPixels="0"         :painting="painting"         @success="success"         @fail="fail"       ></vue-canvas-poster>       <img :src="posterImg" />   data(){   return{           painting: {         width: "285px",         height: "363px",         background: "",         views: [           {             type: "text",             text: "请打开微信扫码使用",             css: {               top: "60px",               left: "50px",               width: "",               maxLines: 1,               fontSize: "20px",               fontWeight: "bold",               fontFamily: "黑体",             },           },           {             type: "qrcode",             content: "https://github.com/sunniejs/vue-canvas-poster", //动态生成             css: {               top: "110px",               left: "77px",               color: "#000000",               background: "transparent",               width: "130px",               height: "130px",             },           },           {             type: "rect",             css: {               bottom: "60px",               left: "0px",               width: "100%",               height: "1px",               color: "#aaa",             },           },           {             type: "text",             text: `${JSON.parse(localStorage.getItem("userMsg")).hotelName}就餐码`, //动态酒店             css: {               bottom: "10px",               left: "0",               width: "100%",               maxLines: 1,               fontSize: "16px",               lineHeight: "32px",               fontWeight: "bold",               fontFamily: "黑体",               textAlign:'center'             },           },         ],       },    } }     //成功生成海报     success(src) {       this.posterImg = src;     },     fail(err) {       console.log(err);     },

　　效果图：

 

Vue Canvas Poster文档：https://sunniejs.github.io/vue-canvas-poster/#/README