• 标记生成出错,请与管理员联系! 2019-05-17
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-17
  • 香河县纪委监委严把信访举报交办督办回复“三关” 让信访举报件件有着落 2019-05-16
  • 向雷锋同志学习 厉害了!体彩志愿服务团队 2019-05-14
  • 美国20岁说唱歌手在迈阿密中枪疑似身亡 2019-05-14
  • 第37届香港电影金像奖颁奖典礼举行 2019-05-04
  • 这是一个错误的观点!这个错误的观点在自以为懂得马克思主义的人群中非常普遍!所以,这也就是中国为什么真正懂马克思主义的人不多的主要原因! 2019-05-02
  • 经济专家那么多,谁写出如何搞好公有制呢? 2019-05-02
  • 海军首次举行水雷战竞赛性考核 2019-05-02
  • 公共图书馆如何更有效地服务读者 2019-05-02
  • 男子模仿网红骑马上路 机动车道飞奔当街摔晕 2019-04-30
  • 小长假前两天,广州哪些文化场馆最火爆? 2019-04-30
  • 高清图集:习近平在山东考察 2019-04-28
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • 用户
     找回密码
     立即注册

    QQ登录

    只需一步,快速开始

    扫一扫,登录网站

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

    吉林十一选五网上投注:小程序用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 来自: 简书
  • 标记生成出错,请与管理员联系! 2019-05-17
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-17
  • 香河县纪委监委严把信访举报交办督办回复“三关” 让信访举报件件有着落 2019-05-16
  • 向雷锋同志学习 厉害了!体彩志愿服务团队 2019-05-14
  • 美国20岁说唱歌手在迈阿密中枪疑似身亡 2019-05-14
  • 第37届香港电影金像奖颁奖典礼举行 2019-05-04
  • 这是一个错误的观点!这个错误的观点在自以为懂得马克思主义的人群中非常普遍!所以,这也就是中国为什么真正懂马克思主义的人不多的主要原因! 2019-05-02
  • 经济专家那么多,谁写出如何搞好公有制呢? 2019-05-02
  • 海军首次举行水雷战竞赛性考核 2019-05-02
  • 公共图书馆如何更有效地服务读者 2019-05-02
  • 男子模仿网红骑马上路 机动车道飞奔当街摔晕 2019-04-30
  • 小长假前两天,广州哪些文化场馆最火爆? 2019-04-30
  • 高清图集:习近平在山东考察 2019-04-28
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • 中国足彩网500网 京东彩票优惠券领取 重庆欢乐生肖46期 顶呱刮十二生肖中奖图 山东时时彩计划软件 360彩票老时时彩开奖 p3开机号试机号近100期 福建体彩36选7开奖结果 总进球数什么意思 海南飞鱼彩票推荐 杏彩娱乐平台官网 体彩幸运赛车走势图带线 真钱麻将 彩票走势图大全彩宝网 360足球比分直播 pk10怎