首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序分享图片的简易canvas工具类

微信小程序分享图片的简易canvas工具类

作者头像
韦弦zhy
发布2018-12-05 11:49:40
1.4K0
发布2018-12-05 11:49:40
举报
在微信小程序中生成一张海报以便用户可以分享到朋友圈的功能在很多微信小程序中都有,今天分享一个自己写的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

demo.jpg

所有参数按顺序传,没有默认值的必须传,如果需要修改最后一个参数,所有参数都需要传。。。(js小白,不知道怎么解决)

下面将大部分功能贴在下方

首先,一个将rpx转成px的方法,canvas使用px作为单位,(我这里UI使用750px宽做设计图,使用的时候将标注软件的px改成rpx就是我们需要的)这个方法我直接写在app.js里面,因为用到的地方很多,比如还有OSS
  onLaunch: function () {
    wx.getSystemInfo({
      success: res => {
        //获取屏幕宽度,然后根据宽度图获取图片
        this.globalData.screenWidth = res.screenWidth;
        this.globalData.pixelRatio = res.pixelRatio;
        this.globalData.factor = res.screenWidth / 750;
      },
    })
  },

  globalData: {
    userInfo: null,
    factor: 0.5,
    screenWidth: 375,
    pixelRatio: 2
  },
 
  toPx: function (rpx) {
    //这里的 2 可以改成 动态的 pixelRatio
    //设成固定的是为了在不同设备生成的图片可以在同一级分辨率 
    return rpx * this.globalData.factor * 2;
  }
1、绘制纯色背景

最开始没有写这个,但是安卓真机上需要所以加上了, 这个其实就是画一个矩形,记得宽高要超过你需要绘制的宽高

/**
 * @author 赵勇
 * @desc canvas 画纯色背景 (在iOS上不画默认白色,安卓上不画默认是透明色)
 * 
 *  @param ctx canvas上下文
 *  @param color 背景颜色
 *  @param width  背景宽
 *  @param height 背景高
 *  @param x 轴 坐标
 *  @param y 轴 坐标
 *
 */
function drawBackground(ctx, color = 'white', width = 1000, height = 3000, x = 0, y = 0) {
    ctx.rect(x, y, width, height)
    ctx.setFillStyle(color)
    ctx.fill()
}
使用

如果默认值满足,也可以只传一个参数即:canvas的上下文

canvasUtil.drawBackground(ctx);

要修改颜色可以

canvasUtil.drawBackground(ctx, '#999999');
2、绘制文字

这个是为了方便设置字体,字号,同时返回了最终的x轴坐标,是为了适应某些需要拼接文字的需求(比如价格拼接单位,但是单位字号不一样)

/**
 * @author 赵勇
 * @desc canvas 画文字
 * 
 *  @param ctx canvas上下文
 *  @param text 需要绘制的文字文字
 *  @param x 轴 坐标
 *  @param y 轴 坐标
 *  @param size 字体大小
 *  @param align 字体对齐方式
 *  @param color 字体颜色
 *  @param baseline 字体基线对齐方式
 *  @param fontWeight 字体粗细
 *
 *  @return 绘制完的 x轴 坐标值
 */
function drawText(ctx, text, x, y, size = '18', align = 'left', color = '#333333', baseline = 'top', fontWeight = 'normal') {
    size = parseInt(size)
    let font = `${fontWeight} ${size}px sans-serif`;
    ctx.font = font;

    ctx.setTextAlign(align);
    ctx.setFillStyle(color);
    ctx.setTextBaseline(baseline);
    ctx.fillText(text, x, y);
    let m = ctx.measureText("" + text)
    return m.width + x;
}
注意点:

(1)size 转成整数是因为字号设置是用rpx转px的,会出现小数的情况,而在canvas里面。。。一不小心就报错了 (2)ctx.measureText();可以测量字符串的长度,但是不能是数字、、、我这里就踩坑了,所以转成字符串

使用:

只传部分参数

canvasUtil.drawBreakText(ctx, "text", app.toPx(50), app.toPx(350));

所有参数都用上

  canvasUtil.drawBreakText(ctx, "text", app.toPx(50), app.toPx(350), app.toPx(38), app.toPx(40), app.toPx(650), 'left', '#999999', 'top', 'bold');
3、绘制换行文字

这个需求也算是常见了吧,这里将返回值改成最后的y坐标值,相信大家也是能理解的啦

/**
 * @author  赵勇
 * @desc  canvas画文字带换行 单位(px)
 * 
 * @param ctx canvas上下文
 * @param text 需要绘制的文字文字
 * @param x x轴 坐标值    
 * @param y y轴 坐标值
 * @param lineHeight 行高
 * @param maxW  文字最宽值
 * @param align 文字对齐方式
 * @param color 字体颜色
 * @param baseline 字体基线对齐方式
 * @param fontWeight 字体粗细
 *
 * @return 最后一行的底部 y轴 坐标值
 */
function drawBreakText(ctx, text, x, y, size, lineHeight, maxW, align = 'left', color = '#333333', baseline = 'top', fontWeight = 'normal') {
    size = parseInt(size)
    let font = `${fontWeight} ${size}px sans-serif`;
    ctx.font = font;
    ctx.setTextAlign(align);
    ctx.setFillStyle(color);
    ctx.setTextBaseline(baseline);

    let textArr = text.split("");
    const count = textArr.length;
    let tempText = "";
    let row = [];
    for (let i = 0; i < count; i++) {
        if (ctx.measureText(tempText).width < maxW) {
            tempText += textArr[i];
        } else {
            I--;
            row.push(tempText);
            tempText = "";
        }
    }
    row.push(tempText);

    let i = 0;
    for (i; i < row.length; i++) {
        ctx.fillText(row[i], x, y + i * lineHeight, maxW);
    }

    return y + i * lineHeight;
}

具体实现逻辑就是循环所有字符,然后去判断长度,看的不是很明白的可以cue我

4、绘制图片,但是保持比例填充

我想在小程序里面,只有mode:aspectFill才是我们真的用的最多的吧!

/**
 * @author 赵勇
 * @desc canvas 绘制图  mode:aspectFill 保持比例填充
 *
 * @param ctx canvas上下文
 * @param imagePath 图片url
 * @param sWidth 原图宽
 * @param sHeight 原图高
 * @param dx canvas x轴 坐标
 * @param dy canvas y轴 坐标
 * @param dWidth canvas 宽
 * @param dHeight canvas 高
 */
function drawImageAspectFill(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight) {
    //canvas与图片宽高比
    var wRatio = dWidth / sWidth;
    var hRatio = dHeight / sHeight;
    //裁剪图片中间部分
    if (sWidth >= dWidth && sHeight >= dHeight || sWidth <= dWidth && sHeight <= dHeight) {
        if (wRatio > hRatio) {
            ctx.drawImage(imagePath, 0, (sHeight - dHeight / wRatio) / 2, sWidth, dHeight / wRatio, dx, dy, dWidth, dHeight);
        } else {
            ctx.drawImage(imagePath, (sWidth - dWidth / hRatio) / 2, 0, dWidth / hRatio, sHeight, dx, dy, dWidth, dHeight);
        }
    }
    //拉伸图片
    else {
        if (sWidth <= dWidth) {
            ctx.drawImage(imagePath, 0, (sHeight - dHeight / wRatio) / 2, sWidth, dHeight / wRatio, dx, dy, dWidth, dHeight);
        } else {
            ctx.drawImage(imagePath, (sWidth - dWidth / hRatio) / 2, 0, dWidth / hRatio, sHeight, dx, dy, dWidth, dHeight);
        }
    }
}

这个具体看例子吧。。我懒得写了

5、绘制图片,但是保持比例填充,同时还要圆角

(1)绘制圆角的方法,网上很多,我抄的,所以也就不做解释了

/**
 * @author 赵勇
 * @desc canvas 绘制圆角视图
 *
 * @param ctx canvas上下文
 * @param x canvas x轴 坐标
 * @param y canvas y轴 坐标
 * @param w 宽
 * @param h 高
 * @param r 圆角半径
 * @param fill 填充 true  边框 false
 */
function drawRoundRect(ctx, x, y, w, h, r, fill = true) {
    //开始绘制
    ctx.beginPath();
    // 因为边缘描边存在锯齿,最好指定使用 transparent 填充
    // 这里是使用 fill 还是 stroke都可以,二选一即可
    if (fill) {
        ctx.setFillStyle('transparent')
    } else {
        ctx.setStrokeStyle('transparent')
    }

    // 左上角
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

    // border-top
    ctx.lineTo(x + w - r, y)

    // 右上角
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

    // border-right
    ctx.lineTo(x + w, y + h - r)

    // 右下角
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

    // border-bottom
    ctx.lineTo(x + r, y + h)

    // 左下角
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

    // border-left
    ctx.lineTo(x, y + r)

    // 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应
    if (fill) {
        ctx.fill()
    } else {
        ctx.stroke()
    }

    ctx.closePath()
}

(2)最后调用绘制圆角和绘制图片的方法

/**
 * @author 赵勇
 * @desc canvas 绘制圆角图  mode:aspectFill 保持比例填充
 *
 * @param ctx canvas上下文
 * @param imagePath 图片url
 * @param sWidth 原图宽
 * @param sHeight 原图高
 * @param dx canvas x轴 坐标
 * @param dy canvas y轴 坐标
 * @param dWidth canvas 宽
 * @param dHeight canvas 高
 * @param radius 圆角半径
 */
function drawImageAspectFillWidthCorner(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight, radius = 0) {
    ctx.save();
    drawRoundRect(ctx, dx, dy, dWidth, dHeight, radius);
    // 剪切
    ctx.clip()
    drawImageAspectFill(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight);
    ctx.restore();
}

这里需要注意的就是这三个方法的调用时机啦

    ctx.save();
    ctx.clip()
    ctx.restore();
最后一个,下载图片。。。what?下载图片和canvas有啥关系、、、当我需要绘制很多图片时,当图片数量不固定时。。。我就需要他了
/**
 * @author 赵勇
 * @desc 下载图片数组
 *
 * @param images 图片url数组
 * @param success 成功回调
 * 
 */
function downloadImages(images, success, info = [], i = 0) {
    const wxGetImageInfo = utils.wxPromisify(wx.getImageInfo);
    wxGetImageInfo({
        src: images[I]
    }).then(res => {
        info = [...info, res];
        I++;
        if (i < images.length) {
            downloadImages(images, success, info, i);
        } else {
            success(info);
        }
    }).catch(err => {
        console.log(err)

    })
}

写了一个简单的demo,需要的就自取啦:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

当然,欢迎star~~~~

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在微信小程序中生成一张海报以便用户可以分享到朋友圈的功能在很多微信小程序中都有,今天分享一个自己写的简易canvas工具类
  • 所有参数按顺序传,没有默认值的必须传,如果需要修改最后一个参数,所有参数都需要传。。。(js小白,不知道怎么解决)
  • 首先,一个将rpx转成px的方法,canvas使用px作为单位,(我这里UI使用750px宽做设计图,使用的时候将标注软件的px改成rpx就是我们需要的)这个方法我直接写在app.js里面,因为用到的地方很多,比如还有OSS
  • 1、绘制纯色背景
    • 使用
    • 2、绘制文字
      • 注意点:
        • 使用:
        • 3、绘制换行文字
        • 4、绘制图片,但是保持比例填充
        • 5、绘制图片,但是保持比例填充,同时还要圆角
          • 最后一个,下载图片。。。what?下载图片和canvas有啥关系、、、当我需要绘制很多图片时,当图片数量不固定时。。。我就需要他了
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档