zoukankan      html  css  js  c++  java
  • 在mpvue中使用canvas生成图片海报

    使用canvas生成图片海报并保存到手机相册

    由于开发中涉及到将产品信息做成海报保存下来,方便用户分享,所以在网上查找了一下资料,发现一篇非常不错的使用mpvue编写的canvas生成图片海报程序,具体代码如下:

    <template>
      <!--index.wxml-->
      <view class="posterWrap">
        <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
        <div class="fixed_container">
          <div class="fixed_inner">
            <div @click="handleShowImg">
              <img src="../../../dist/wx/static/img/index_img_20.png" alt />
              <span>发送给朋友</span>
            </div>
            <div @click="handleSave">
              <img src="../../../dist/wx/static/img/index_img_20.png" alt />
              <span>保存名片</span>
            </div>
          </div>
        </div>
      </view>
    </template>
    

    <script>
    export
    default {
    //index.js
    //获取应用实例
    data() {
    return {
    InfoSync: {}
    };
    },
    onLoad() {
    const InfoSync
    = wx.getSystemInfoSync();
    this.InfoSync = InfoSync;
    let bili
    = InfoSync.windowWidth / 375 * 1;
    const ctx
    = wx.createCanvasContext("posterCanvas");
    this.saveThe(
    "http://www.365dsw.com/Imgs/ProImg/30_2/2020060510123779215.jpg",
    path
    => {
    ctx.drawImage(path,
    0, 0, 310 * bili, 435 * bili); //ctx.drawImage(图片路径,距离画布左边,距离画布右边,图片宽,图片高)
    ctx.save(); // 保存当前绘画
    ctx.setTextAlign("center"); // 文字居中 ctx.fillText(显示文字,距离画布左边/基准点/文字以这个点居中或左对齐,距离画布顶部)
    ctx.setFillStyle("#111"); // 文字颜色:fff
    ctx.setFontSize(16); // 文字字号
    ctx.fillText("刘亦菲", 155 * bili, 164 * bili); //名字 ctx.fillText(显示文字,距离画布左边/基准点/文字以这个点居中或左对齐,距离画布顶部)
    ctx.setFontSize(21); // 文字字号
    ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 222.5 * bili);
    ctx.setFillStyle(
    "#895908"); // 文字颜色:895908
    ctx.setTextAlign("center"); // 文字居中
    ctx.fillText("位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);
    ctx.fillText(
    "位置差一点出阴影重叠加粗", 155 * bili, 221.5 * bili);
    ctx.setFontSize(
    14); // 文字字号
    ctx.setTextAlign("left"); // 文字居中
    ctx.setFillStyle("#111"); // 文字颜色:fff
    ctx.fillText("生日:1990-01-01", 90 * bili, 256 * bili);
    ctx.fillText(
    "电话:9090980", 90 * bili, 284 * bili);
    ctx.setFillStyle(
    "#111"); // 文字颜色:111
    ctx.setTextAlign("left"); // 文字居中
    ctx.setFontSize(17); // 文字字号
    ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
    ctx.fillText(
    "写两次让字体加粗", 140 * bili, 346 * bili);
    ctx.setFillStyle(
    "#828282"); // 文字颜色:828282
    ctx.setFontSize(14); // 文字字号
    ctx.fillText("写一次不加粗", 140 * bili, 376.5 * bili);
    ctx.setFillStyle(
    "#B0B0B0"); // 文字颜色:B0B0B0
    ctx.setFontSize(11); // 文字字号
    ctx.fillText("小字体", 140 * bili, 398 * bili);
    ctx.save();
    //圆形头像框
    ctx.setStrokeStyle("rgba(0,0,0,0)");
    ctx.rect(
    0, 0, 310 * bili,310 * bili);
    ctx.fill();
    //二维码
    this.saveThe(
    "http://www.365dsw.com/CommonImg/hotcode.jpg",
    path
    => {
    ctx.drawImage(path,
    30.5 * bili, 320 * bili, 93 * bili, 93 * bili);
    ctx.save();
    //头像
    this.saveThe(
    "http://www.365dsw.com/Imgs/ProImg/68_2/2019103111151556445.jpg",
    path
    => {
    ctx.clip();
    ctx.drawImage(
    path,
    0 * bili,
    0 * bili,
    310 * bili,
    310 * bili
    );
    ctx.save();
    ctx.stroke();
    ctx.draw();
    }
    );
    }
    );
    }
    );
    },
    methods: {
    // 小程序需要将图片下载下来,然后才能绘制到画布上
    saveThe(url, callback) {
    wx.getImageInfo({
    src: url,
    //服务器返回的图片地址
    success: res => {
    callback(res.path);
    },
    fail:
    function(res) {}
    });
    },
    // 点击保存时,将画布生成海报
    handleSave() {
    var that = this;
    wx.showLoading({
    title:
    "正在保存...",
    mask:
    true
    });
    wx.getSetting({
    success(res) {
    if (res.authSetting["scope.writePhotosAlbum"]) {
    that.saveImg();
    }
    else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
    wx.authorize({
    scope:
    "scope.writePhotosAlbum",
    success() {
    that.saveImg();
    },
    fail() {
    wx.hideLoading();
    wx.showToast({
    title:
    "您没有授权,无法保存到相册",
    icon:
    "none"
    });
    }
    });
    }
    else {
    wx.openSetting({
    success(res) {
    if (res.authSetting["scope.writePhotosAlbum"]) {
    that.saveImg();
    }
    else {
    wx.showToast({
    title:
    "您没有授权,无法保存到相册",
    icon:
    "none"
    });
    }
    }
    });
    }
    },
    fail: err
    => {
    wx.hideLoading();
    wx.showToast({
    title:
    "出现了错误,请稍后再试",
    icon:
    "none"
    });
    }
    });
    },
    saveImg() {
    // 按照设备比例去计算图片和画布尺寸
    let bili = this.InfoSync.windowWidth / 375 * 1;
    wx.canvasToTempFilePath({
    x:
    0,
    y:
    0,
    310 * bili,
    height:
    435 * bili,
    destWidth:
    310 * bili * this.InfoSync.pixelRatio,
    destHeight:
    435 * bili * this.InfoSync.pixelRatio,
    fileType:
    "png",
    quality:
    1,
    canvasId:
    "posterCanvas",
    success:
    function(res) {
    wx.hideLoading();
    var tempFilePath = res.tempFilePath;
    // 需要权限
    wx.saveImageToPhotosAlbum({
    filePath: tempFilePath,
    success(res) {
    wx.showModal({
    content:
    "图片已保存到相册,赶紧晒一下吧~",
    showCancel:
    false,
    confirmText:
    "好的",
    confirmColor:
    "#333"
    });
    },
    fail:
    function(res) {
    wx.hideLoading();
    wx.showToast({
    title:
    "没有相册权限",
    icon:
    "none",
    duration:
    2000
    });
    }
    });
    },
    fail: err
    => {
    wx.hideLoading();
    wx.showToast({
    title:
    "出现了错误,请稍后再试",
    icon:
    "none"
    });
    }
    });
    },
    // 发送给朋友,以图片的方式,先生成临时图片地址,然后调用微信api显示转发
    // handleShowImg() {
    // let bili = this.InfoSync.windowWidth / 375 * 1;
    // wx.canvasToTempFilePath({
    // x: 0,
    // y: 0,
    // 310 * bili,
    // height: 435 * bili,
    // destWidth: 310 * bili * this.InfoSync.pixelRatio,
    // destHeight: 435 * bili * this.InfoSync.pixelRatio,
    // fileType: "png",
    // quality: 1,
    // canvasId: "posterCanvas",
    // success: function(res) {
    // wx.hideLoading();
    // wx.previewImage({
    // urls: [res.tempFilePath],
    // current: res.tempFilePath
    // });
    // },
    // fail: err => {
    // wx.hideLoading();
    // wx.showToast({
    // title: "出现了错误,请稍后再试",
    // icon: "none"
    // });
    // }
    // });
    // }
    }
    };
    </script>
    <style scoped>
    .posterWrap {
    min
    -height: 100%;
    padding
    -top: 40px;
    background
    -color: #f1f1f1;
    }

    .myCanvas {
    310px;
    height: 435px;
    margin: 0 auto;
    background: #fff;
    }

    .fixed_container {
    position: fixed;
    bottom: 0;
    100%;
    z
    -index: 1000;
    }

    .fixed_inner {
    display: flex;
    justify-content: space-between;
    border
    -top: 1rpx solid #e5e5e5;
    padding: 20rpx 32rpx;
    background: #ffffff;
    align
    -items: center;
    }
    .fixed_inner div {
    display: flex;
    align
    -items: center;
    justify
    -content: center;
    color: #fff;
    border
    -radius: 5rpx;
    330rpx;
    height: 76rpx;
    line
    -height: 76rpx;
    text
    -align: center;
    background:
    -webkit-linear-gradient(left, #27caac, #02ba8e);
    background:
    -o-linear-gradient(right, #27caac, #02ba8e);
    background:
    -moz-linear-gradient(right, #27caac, #02ba8e);
    background: linear
    -gradient(to right, #27caac, #02ba8e); / 标准的语法 /
    }
    .fixed_inner div:last
    -child {
    background:
    -webkit-linear-gradient(left, #ff7179, #ff6459);
    background:
    -o-linear-gradient(right, #ff7179, #ff6459);
    background:
    -moz-linear-gradient(right, #ff7179, #ff6459);
    background: linear
    -gradient(to right, #ff7179, #ff6459);
    }
    .fixed_inner div img {
    42rpx;
    height: 32rpx;
    margin
    -right: 11rpx;
    }
    </style>

    效果图如下

    代码内容出自https://www.freesion.com/article/3415408115/,感谢提供!!!

    发送给朋友
    保存名片

  • 相关阅读:
    JavaWeb的一些理解
    phpMysql安装遇到的两个问题
    正则表达式学习1
    《SOA思想、技术与系统集成应用详解》读书笔记四《SOA核心技术及应用》Apache Tuscany sca安装及与eclipse结合
    19本书,选5本,任两本不邻粗解
    J2ME中处理日期相关问题
    《JSP2.0 技术手册》读书笔记二HttpSession
    《SOA思想、技术与系统集成应用详解》读书笔记三SCA
    《SOA思想、技术与系统集成应用详解》读书笔记一
    《SOA思想、技术与系统集成应用详解》读书笔记二Java Web服务
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/14504720.html
Copyright © 2011-2022 走看看