mpvue 微信小程序canvas生成海报

小鱼儿 2023-06-19 09:34 223阅读 0赞

mpvue 微信小程序canvas生成海报

效果

在这里插入图片描述

贴代码 html

  1. <template>
  2.   <!--index.wxml-->
  3.   <view class="posterWrap">
  4.     <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
  5.     <div class="fixed_container">
  6.       <div class="fixed_inner">
  7.         <div @click="handleShowImg">
  8.           <img src="../../../static/images/haibao.png" alt />
  9.           <span>发送给朋友</span>
  10.         </div>
  11.         <div @click="handleSave">
  12.           <img src="../../../static/images/weixin.png" alt />
  13.           <span>保存名片</span>
  14.         </div>
  15.       </div>
  16.     </div>
  17.   </view>
  18. </template>

贴代码 js

  1. <script>
  2. export default {
  3.   //index.js
  4.   //获取应用实例
  5.   data() {
  6.     return {
  7.       InfoSync: {}
  8.     };
  9.   },
  10.   onLoad() {
  11.     const InfoSync = wx.getSystemInfoSync();
  12.     this.InfoSync = InfoSync;
  13.     let bili = InfoSync.windowWidth / 375 * 1;
  14.     const ctx = wx.createCanvasContext("posterCanvas");
  15.     this.saveThe(
  16.       "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575527967726&di=172dcdd5a6f6b3a92a17d670793a6a50&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201303%2F10%2F20130310192450_S8HG8.thumb.700_0.jpeg",
  17.       path => {
  18.         ctx.drawImage(path, 0, 0, 310 * bili, 435 * bili); //ctx.drawImage（图片路径，距离画布左边，距离画布右边，图片宽，图片高）
  19.         ctx.save(); // 保存当前绘画
  20.         ctx.setTextAlign("center"); // 文字居中 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）
  21.         ctx.setFillStyle("#111"); // 文字颜色：fff
  22.         ctx.setFontSize(16); // 文字字号
  23.         ctx.fillText("刘亦菲", 155 * bili, 164 * bili); //名字 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）
  24.         ctx.setFontSize(21); // 文字字号
  25.         ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 222.5 * bili);
  26.         ctx.setFillStyle("#895908"); // 文字颜色：895908
  27.         ctx.setTextAlign("center"); // 文字居中
  28.         ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);
  29.         ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);
  30.         ctx.setFontSize(14); // 文字字号
  31.         ctx.setTextAlign("left"); // 文字居中
  32.         ctx.setFillStyle("#111"); // 文字颜色：fff
  33.         ctx.fillText("生日：1990-01-01", 90 * bili, 256 * bili);
  34.         ctx.fillText("电话：9090980", 90 * bili, 284 * bili);
  35.         ctx.setFillStyle("#111"); // 文字颜色：111
  36.         ctx.setTextAlign("left"); // 文字居中
  37.         ctx.setFontSize(17); // 文字字号
  38.         ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
  39.         ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
  40.         ctx.setFillStyle("#828282"); // 文字颜色：828282
  41.         ctx.setFontSize(14); // 文字字号
  42.         ctx.fillText("写一次不加粗", 140 * bili, 376.5 * bili);
  43.         ctx.setFillStyle("#B0B0B0"); // 文字颜色：B0B0B0
  44.         ctx.setFontSize(11); // 文字字号
  45.         ctx.fillText("小字体", 140 * bili, 398 * bili);
  46.         ctx.save();
  47.         //圆形头像框
  48.         ctx.setStrokeStyle("rgba(0,0,0,0)");
  49.         ctx.arc(155 * bili, 94 * bili, 45 * bili, 0, 2 * Math.PI);
  50.         ctx.fill();
  51.         //二维码
  52.         this.saveThe(
  53.           "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575528227860&di=f644289e83c18cf73d44e76dec4c1246&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h395%2F20180109%2F0ae9-fyqnici9075376.jpg",
  54.           path => {
  55.             ctx.drawImage(path, 30.5 * bili, 320 * bili, 93 * bili, 93 * bili);
  56.             ctx.save();
  57.             //头像
  58.             this.saveThe(
  59.               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575528093128&di=a92d8586763a982f233df10d358b8136&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F16%2F20160216165321_eTASf.jpeg",
  60.               path => {
  61.                 ctx.clip();
  62.                 ctx.drawImage(
  63.                   path,
  64.                   110 * bili,
  65.                   47.5 * bili,
  66.                   90 * bili,
  67.                   90 * bili
  68.                 );
  69.                 ctx.save();
  70.                 ctx.stroke();
  71.                 ctx.draw();
  72.               }
  73.             );
  74.           }
  75.         );
  76.       }
  77.     );
  78.   },
  79.   methods: {
  80.     // 小程序需要将图片下载下来，然后才能绘制到画布上
  81.     saveThe(url, callback) {
  82.       wx.getImageInfo({
  83.         src: url, //服务器返回的图片地址
  84.         success: res => {
  85.           callback(res.path);
  86.         },
  87.         fail: function(res) {}
  88.       });
  89.     },
  90.     // 点击保存时，将画布生成海报
  91.     handleSave() {
  92.       var that = this;
  93.       wx.showLoading({
  94.         title: "正在保存...",
  95.         mask: true
  96.       });
  97.       wx.getSetting({
  98.         success(res) {
  99.           if (res.authSetting["scope.writePhotosAlbum"]) {
  100.             that.saveImg();
  101.           } else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
  102.             wx.authorize({
  103.               scope: "scope.writePhotosAlbum",
  104.               success() {
  105.                 that.saveImg();
  106.               },
  107.               fail() {
  108.                 wx.hideLoading();
  109.                 wx.showToast({
  110.                   title: "您没有授权，无法保存到相册",
  111.                   icon: "none"
  112.                 });
  113.               }
  114.             });
  115.           } else {
  116.             wx.openSetting({
  117.               success(res) {
  118.                 if (res.authSetting["scope.writePhotosAlbum"]) {
  119.                   that.saveImg();
  120.                 } else {
  121.                   wx.showToast({
  122.                     title: "您没有授权，无法保存到相册",
  123.                     icon: "none"
  124.                   });
  125.                 }
  126.               }
  127.             });
  128.           }
  129.         },
  130.         fail: err => {
  131.           wx.hideLoading();
  132.           wx.showToast({
  133.             title: "出现了错误，请稍后再试",
  134.             icon: "none"
  135.           });
  136.         }
  137.       });
  138.     },
  139.     saveImg() {
  140.       // 按照设备比例去计算图片和画布尺寸
  141.       let bili = this.InfoSync.windowWidth / 375 * 1;
  142.       wx.canvasToTempFilePath({
  143.         x: 0,
  144.         y: 0,
  145.         width: 310 * bili,
  146.         height: 435 * bili,
  147.         destWidth: 310 * bili * this.InfoSync.pixelRatio,
  148.         destHeight: 435 * bili * this.InfoSync.pixelRatio,
  149.         fileType: "png",
  150.         quality: 1,
  151.         canvasId: "posterCanvas",
  152.         success: function(res) {
  153.           wx.hideLoading();
  154.           var tempFilePath = res.tempFilePath;
  155.           // 需要权限
  156.           wx.saveImageToPhotosAlbum({
  157.             filePath: tempFilePath,
  158.             success(res) {
  159.               wx.showModal({
  160.                 content: "图片已保存到相册，赶紧晒一下吧~",
  161.                 showCancel: false,
  162.                 confirmText: "好的",
  163.                 confirmColor: "#333"
  164.               });
  165.             },
  166.             fail: function(res) {
  167.               wx.hideLoading();
  168.               wx.showToast({
  169.                 title: "没有相册权限",
  170.                 icon: "none",
  171.                 duration: 2000
  172.               });
  173.             }
  174.           });
  175.         },
  176.         fail: err => {
  177.           wx.hideLoading();
  178.           wx.showToast({
  179.             title: "出现了错误，请稍后再试",
  180.             icon: "none"
  181.           });
  182.         }
  183.       });
  184.     },
  185.     // 发送给朋友，以图片的方式，先生成临时图片地址，然后调用微信api显示转发
  186.     handleShowImg() {
  187.       let bili = this.InfoSync.windowWidth / 375 * 1;
  188.       wx.canvasToTempFilePath({
  189.         x: 0,
  190.         y: 0,
  191.         width: 310 * bili,
  192.         height: 435 * bili,
  193.         destWidth: 310 * bili * this.InfoSync.pixelRatio,
  194.         destHeight: 435 * bili * this.InfoSync.pixelRatio,
  195.         fileType: "png",
  196.         quality: 1,
  197.         canvasId: "posterCanvas",
  198.         success: function(res) {
  199.           wx.hideLoading();
  200.           wx.previewImage({
  201.             urls: [res.tempFilePath],
  202.             current: res.tempFilePath
  203.           });
  204.         },
  205.         fail: err => {
  206.           wx.hideLoading();
  207.           wx.showToast({
  208.             title: "出现了错误，请稍后再试",
  209.             icon: "none"
  210.           });
  211.         }
  212.       });
  213.     }
  214.   }
  215. };
  216. </script>

贴代码 css

  1. <style scoped>
  2. .posterWrap {
  3.   min-height: 100%;
  4.   padding-top: 40px;
  5.   background-color: #f1f1f1;
  6. }
  8. .myCanvas {
  9.   width: 310px;
  10.   height: 435px;
  11.   margin: 0 auto;
  12.   background: #fff;
  13. }
  15. .fixed_container {
  16.   position: fixed;
  17.   bottom: 0;
  18.   width: 100%;
  19.   z-index: 1000;
  20. }
  22. .fixed_inner {
  23.   display: flex;
  24.   justify-content: space-between;
  25.   border-top: 1rpx solid #e5e5e5;
  26.   padding: 20rpx 32rpx;
  27.   background: #ffffff;
  28.   align-items: center;
  29. }
  30. .fixed_inner div {
  31.   display: flex;
  32.   align-items: center;
  33.   justify-content: center;
  34.   color: #fff;
  35.   border-radius: 5rpx;
  36.   width: 330rpx;
  37.   height: 76rpx;
  38.   line-height: 76rpx;
  39.   text-align: center;
  40.   background: -webkit-linear-gradient(left, #27caac, #02ba8e);
  41.   background: -o-linear-gradient(right, #27caac, #02ba8e);
  42.   background: -moz-linear-gradient(right, #27caac, #02ba8e);
  43.   background: linear-gradient(to right, #27caac, #02ba8e); /* 标准的语法 */
  44. }
  45. .fixed_inner div:last-child {
  46.   background: -webkit-linear-gradient(left, #ff7179, #ff6459);
  47.   background: -o-linear-gradient(right, #ff7179, #ff6459);
  48.   background: -moz-linear-gradient(right, #ff7179, #ff6459);
  49.   background: linear-gradient(to right, #ff7179, #ff6459);
  50. }
  51. .fixed_inner div img {
  52.   width: 42rpx;
  53.   height: 32rpx;
  54.   margin-right: 11rpx;
  55. }
  56. </style>

全部都有注释，自己看
github 地址 demo

发表评论

表情：
评论列表 （有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读