• 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 普法小课堂之“有效遗嘱” 2019-03-23
  • 回复@看着就想笑:同时,市场不具有配置全局性长期性战略性资源的功能。 2019-03-22
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-03-17
  • 北京市北京睿通伟业综合店【在线咨询】 2018-11-26
  • 10年后 逍客仍是15万级合资SUV的定义者 2018-11-26
  • 还有十八掌、自然想钱系列马甲…… 2018-11-26
  • 用户
     找回密码
     立即注册

    QQ登录

    只需一步,快速开始

    扫一扫,登录网站

    小程序社区 首页 教程 查看内容

    广东11选5全天杀号:小程序用Canvas给图片加水印,拼接图片,制作名片

    河北体彩11选5今天开奖 www.7vek.com Rolan 2018-11-22 00:32

    Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么 ...

    Canvas是微信河北体彩11选5今天开奖中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么给图片添加水印,图片的拼接,怎么制作个性名片以及制作一个涂鸦的画板。

    水印

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

    创建画板

    1. <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也是动态的。我们得根据获取的图片来动态的计算出它的宽高,这里主要是计算它的高度,以保证我们弄出来的图片是不会变形的。

    // 这里的图片数组可以从相册中选取出来,也可以从上一个页面传过来,但是要注意传的时候得转成JSON再传

    1. for(var i = 0; i < imagesArr.length; i++){
    2. var imageUrl = imagesArr[i]
    3. wx.getImageInfo({
    4. src: imageUrl,
    5. success: function (res) {
    6. var width = res.width
    7. var height = res.height
    8. // downNum是一个对象,用来计数
    9. obj.downNum = obj.downNum + 1
    10. let sw = wx.getSystemInfoSync().windowWidth
    11. if(width > sw){
    12. width = sw
    13. height = height / res.width * width
    14. }
    15. // heightForCanvas也是一个对象,用来记录总的高度
    16. ctx.drawImage(res.path, (sw-width)/2.0, obj.heightForCanvas, width, height)
    17. obj.heightForCanvas = obj.heightForCanvas + height
    18. that.setData({
    19. height: obj.heightForCanvas
    20. })
    21. // 全部drawImage调用完毕后再调用draw()
    22. if (obj.downNum == imagesArr.length){
    23. ctx.draw()
    24. }
    25. }
    26. })
    27. }

    个性名片

    个性名片其实就是对画布的一个综合整体的运用,同样的技巧你也可以用来制作海报什么的?;故撬狄幌滤悸?,首先我们也是创建画布,然后给它添加一个贴切你主题的背景图,添加背景图最需要注意的还是获取图片的尺寸防止其变形。背景添加了我们就需要给它添加展示的内容了,添加文字添加图片等等。这里说一下怎么给图片切圆角,首先我们需要用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. })

    最后还有很多的细节没有讲到大家如果还有疑点可以看看这个demo这是我写的一个简单处理图片的一个小程序,你也可以在微信小程序中搜索“图片帮手”。也可以直接扫描下方的二维码 

    demo:

    由于本人也是小程序小白,有什么地方说的不对的还请海涵。

    作者:codeLover_0324 
    链接:https://www.jianshu.com/p/50b662e93053 

    鲜花
    鲜花 (1)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (1 人)

    分享至 : QQ空间
    收藏
    原作者: codeLover_0324 来自: 简书
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 普法小课堂之“有效遗嘱” 2019-03-23
  • 回复@看着就想笑:同时,市场不具有配置全局性长期性战略性资源的功能。 2019-03-22
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-03-17
  • 北京市北京睿通伟业综合店【在线咨询】 2018-11-26
  • 10年后 逍客仍是15万级合资SUV的定义者 2018-11-26
  • 还有十八掌、自然想钱系列马甲…… 2018-11-26