找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序用Canvas给图片加水印,拼接图片,制作名片

[复制链接]
查看: 870|回复: 200
最佳答案
109 

717

主题

2380

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35115

HKC

QQ
 楼主| 发表于 2018-11-9 14:41:43 | 显示全部楼层 |阅读模式
Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么给图片添加水印,图片的拼接,怎么制作个性名片以及制作一个涂鸦的画板。

水印.

水印的添加总的来说可以简单的分为三步来走,第一步先完成一个画布的创建,第二步在画板上画出你想添加水印的图片,第三步画上你要添加的水印文字

创建画板

<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;" canvas-id="myCanvas"></canvas>
需要注意的是canvas-id的唯一性,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。这里我们将宽度和高度设置成动态的,根据图片的宽高来确定画板宽高的比例。
然后我们需要在.js文件中进行操作:
  1. var ctx= wx.createCanvasContext('myCanvas')
  2. var that = this
  3. //选择图片,这里我们设置先选择一张。
  4. wx.chooseImage({
  5.   count: 1,
  6.   sizeType: ['original', 'compressed'],
  7.   sourceType: ['album', 'camera'],
  8.   success(res) {
  9.     var tempFilePaths = res.tempFilePaths
  10.     //获取图片基本信息
  11.     wx.getImageInfo({
  12.         src: tempFilePaths[0],
  13.         success: function (res) {
  14.           var width = res.width
  15.           var height = res.height
  16.           //获取屏幕宽度
  17.           let screenWidth = wx.getSystemInfoSync().windowWidth
  18.           //处理一下图片的宽高的比例
  19.           if (width >= height) {
  20.             if (width > screenWidth) {
  21.               width = screenWidth
  22.             }
  23.             height = height / res.width * width
  24.           } else {
  25.             if (width > screenWidth) {
  26.               width = screenWidth
  27.             }
  28.             if (height > 400) {
  29.               height = 400
  30.               width = res.width / res.height * height
  31.             } else {
  32.               height = height / res.width * width
  33.             }
  34.           }
  35.           that.setData({
  36.             imageWidth: width,
  37.             imageHeight: height,
  38.           })
  39.           ctx.drawImage(res.path, 0, 0, width, height)
  40.           ctx.rotate(obj.rotate * Math.PI / 180)
  41.           for (let j = 1; j < 12; j++) {
  42.               ctx.beginPath()
  43.               ctx.setFontSize(14)
  44.               ctx.setFillStyle('white')
  45.               ctx.fillText('你要添加的文字', 0, 50 * j)
  46.               for (let i = 1; i < 12; i++) {
  47.                   ctx.beginPath()
  48.                   ctx.setFontSize(14)
  49.                   ctx.setFillStyle('white')
  50.                   ctx.fillText("你要添加的文字", (15 + (14-1)*"你要添加的文字".length) * i, 50 * j)
  51.               }
  52.           }
  53.           for (let j = 0; j < 12; j++) {
  54.               ctx.beginPath()
  55.               ctx.setFontSize(obj.fontSize)
  56.               ctx.setFillStyle(obj.color)
  57.               ctx.fillText("你要添加的文字", 0, -50 * j)
  58.               for (let i = 1; i < 12; i++) {
  59.                   ctx.beginPath()
  60.                   ctx.setFontSize(14)
  61.                   ctx.setFillStyle('white')
  62.                   ctx.fillText("你要添加的文字", (15 + (14-1)* "你要添加的文字".length) * i, -50 * j)
  63.               }
  64.             }
  65.             ctx.draw()
  66.         }
  67.     })
  68.   }
  69. })
复制代码

图片拼接.

图片拼接思路就更加简单了,说白了就是在一个画布上咱们连续地画几张图片再将它导出来就OK了。
创建画布我就不说了,还是和上面的一样,width和height也是动态的。我们得根据获取的图片来动态的计算出它的宽高,这里主要是计算它的高度,以保证我们弄出来的图片是不会变形的。
  1. // 这里的图片数组可以从相册中选取出来,也可以从上一个页面传过来,但是要注意传的时候得转成JSON再传
  2. for(var i = 0; i < imagesArr.length; i++){
  3.   var imageUrl = imagesArr[i]
  4.   wx.getImageInfo({
  5.     src: imageUrl,
  6.     success: function (res) {
  7.       var width = res.width
  8.       var height = res.height
  9.       // downNum是一个对象,用来计数
  10.       obj.downNum = obj.downNum + 1
  11.       let sw = wx.getSystemInfoSync().windowWidth
  12.       if(width > sw){
  13.         width = sw
  14.         height = height / res.width * width
  15.       }
  16.       // heightForCanvas也是一个对象,用来记录总的高度   
  17.       ctx.drawImage(res.path, (sw-width)/2.0, obj.heightForCanvas, width, height)
  18.       obj.heightForCanvas = obj.heightForCanvas + height
  19.       that.setData({
  20.         height: obj.heightForCanvas
  21.       })
  22.       // 全部drawImage调用完毕后再调用draw()
  23.       if (obj.downNum == imagesArr.length){
  24.         ctx.draw()
  25.       }
  26.     }
  27.   })
  28. }
复制代码

个性名片.

个性名片其实就是对画布的一个综合整体的运用,同样的技巧你也可以用来制作海报什么的。还是说一下思路,首先我们也是创建画布,然后给它添加一个贴切你主题的背景图,添加背景图最需要注意的还是获取图片的尺寸防止其变形。背景添加了我们就需要给它添加展示的内容了,添加文字添加图片等等。这里说一下怎么给图片切圆角,首先我们需要用canvas画一个圆,然后再对其进行裁剪,因为一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内。
  1. onLoad: function () {
  2.     var that = this;
  3.     var ctx = wx.createCanvasContext('myCanvas')
  4.     // 先保存状态 已便于画完圆再用
  5.     ctx.save();
  6.     // 开始绘制
  7.     ctx.beginPath();
  8.     //先画个圆
  9.     ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
  10.     // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
  11.     ctx.clip();
  12.     ctx.drawImage('图片的地址', 0, 0, '图片宽度', '图片高度');
  13.     //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以      继续绘制
  14.     ctx.restore();
  15.     ctx.draw();
  16.    }
  17. })
复制代码


PHelper-master.zip (983.51 KB, 下载次数: 51)
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

140

积分

等待验证会员

积分
140
发表于 2018-11-9 14:53:54 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:41 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:44 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:46 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:48 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:49 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:51 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:52 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1304

帖子

1278

积分

专家路上

积分
1278
发表于 2018-11-9 15:25:54 | 显示全部楼层
超级上门服务
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com