精华内容
下载资源
问答
  • DIY在线制作表情包图片GIF动图微信小程序下载.zip
  • 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
  • 小程序介绍 图片编辑助手小程序支持快速图片编辑,图片加文字,图片涂鸦,自带表情包素材,快速制作表情包,长图拼接,图片加相框等功能。 微信扫码体验 截图 ...

    TIM图片20191113001021.png

    小程序介绍

    图片编辑助手小程序支持快速图片编辑,图片加文字,图片涂鸦,自带表情包素材,快速制作表情包,长图拼接,图片加相框等功能。

    微信扫码体验

    pichelper.jpg

    截图

    Screenshot_2019-11-12-23-00-13-944_com.tencent.mm.jpg
    Screenshot_2019-11-12-23-02-44-059_com.tencent.mm.jpg
    TIM图片20191113070828.jpg
    Screenshot_2019-11-12-23-04-01-186_com.tencent.mm.jpg

    展开全文
  • 给头像加边框——校庆头像制作小程序 ——分享改变世界,感谢成长路上遇见的分享 话不多说先上图(满意客官再往下看): 首页 选择头像框 制作界面 ...

    给头像加边框——校庆头像制作的小程序

                                                                                                                         ——分享改变世界,感谢成长路上遇见的分享

    话不多说先上图(满意客官再往下看):

    首页
    选择头像框
    制作界面
    用户选择图像
    用户裁剪选择的图像
    生成并保存头像到手机
    效果图
    扫码体验

    话不多说先上代码:

    <!--index.wxml-->
    <!--制作头像首页(类似一个海报)-->
    <view class="container">
       <!-- 卡片样式(个人感觉有利于大小不同的手机看海报,并不是响应式) -->
       <view class="card_wrap">
        <view class="card_item card1 ">
          <!-- 给海报顶部一个小蛋糕 -->
          <span class="change_icon">
            <image src="/images/dangao.png"></image>
          </span>
          <!-- 海报文字 -->
          <view class="card_info">
            <blockquote class="card_info_mes_title">90岁生日快乐!</blockquote>
              <span class="card_info_mes_item" style="margin-top: 15px;">薪火相传,弦歌不辍</span>
              <span class="card_info_mes_item">桃李不言,下自成蹊</span>
              <span class="card_info_mes_item">十月二十日,我们在AHAU等你</span>
          </view>
          <!-- 底部的跳转选择头像框button -->
          <view class="btn-cta buy_btn" id="1" bindtap="toselect">一起换头像吧!</view>
          <!-- 海报的整个background-image -->
          <image src="/images/xianhua1.jpg"></image>
          <!-- 底部小广告 -->
          <view class="footer">出品人:AAU 技术支持:信计院16网络M</view>
        </view>
       </view> 
    </view>
    <!--author:马小帅.-->
    

    算了,不是很复杂,直接上项目:

    SchoolBirthdayPhoto项目_Github地址——下载本地直接跑吧

    实用简单的一个微信小程序,给需要的人。如果你觉得好就赞一个,不好的话,我会慢慢变好的。

    如果有什么能改变代码的世界,我想那肯定是分享。                      ——侵删,本人qq:2928423192(啥都可联系,博客登的少)

                                                                                                         

    展开全文
  • 微信小程序用Canvas给图片加水印,拼接图片制作名片PHelper-master.zip
  • 小程序图片裁剪组件

    千次阅读 2019-06-08 00:46:52
    最近开始做微信小程序项目,其中有需要图片裁剪的功能。 微信小程序拥有许多方便的API,相机相册调用作为移动端使用频率最高的API之一,小程序做了非常好的封装,使用上也非常舒服。然而,翻遍了整篇小程序开发文档...

    最近开始做微信小程序项目,其中有需要图片裁剪的功能。

    微信小程序拥有许多方便的API,相机相册调用作为移动端使用频率最高的API之一,小程序做了非常好的封装,使用上也非常舒服。然而,翻遍了整篇小程序开发文档,仍然没能找到裁剪相关的描述。难道小程序官方没考虑过为小程序提供一个裁剪API吗。

    裁剪API是没找到,优秀的开源的第三方裁剪组件还是能找到一些的,试用了几个,跟自己预期的裁剪方法不太一样,之前做过一段时间的原生开发,Android系统自带就有一个不错的裁剪方法,我想能不能做一个防Android系统裁剪的小程序组件呢?

    好在小程序提供了一个canvas画布组件,提供了非常丰富的API,可以在画布中绘制图片,并将画布中的图形输出,这个组件正合适用来做裁剪功能,事实上,其他一些第三方裁剪组件,也正是基于这个画布组件来制作的。

    自己动手丰衣足食,开始自己造轮子。

    那么,来吧,放预览图。

     

    使用说明

    核心逻辑写在组件中,在需要剪裁的页面引入组件即可。同时禁用页面弹动(ios端页面默认有页面弹动属性,需要禁用)。

    {
      "usingComponents": {
        "cropper":"/pages/cropper/cropper"
      },
      "disableScroll": true
    }

     

    页面布局部分

    <!--pages/cropper/cropper-sample.wxml-->
    <view class='body'>
    
      <!-- 裁剪组件 -->
      <cropper id='cropper' class='stage'></cropper>
    
        <!-- 取消 和 确认 按钮,并绑定事件 -->
      <view class='bar'>
        <view class='btn btn-cancel' bindtap='fnCancel'>取消</view>
        <view class='btn btn-submit' bindtap='fnSubmit'>确定</view>
      </view>
    
    </view>

    页面样式

    page{
      height: 100%;
      box-sizing: border-box;
    }
    .body{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .stage{
      flex-grow: 1;
    }
    
    .bar{
      height: 80rpx;
      padding: 36rpx;
      display: flex;
      flex-direction: row;
      background-color: black;
    }
    
    .btn{
      position: relative;
      flex-grow: 1;
        border: 2rpx solid grey;
      line-height: 80rpx;
      text-align: center;
        color: white;
       font-size: 32rpx;
    }
    
    .btn-cancel{
       border-top-left-radius: 40rpx;
       border-bottom-left-radius: 40rpx;
    }
    
    .btn-submit{
       border-top-right-radius: 40rpx;
       border-bottom-right-radius: 40rpx;
    }

    漂亮的布局有了,接着就可以再js里愉快的裁剪图片了。

    再页面加载回调中,对组件进行初始化。

    imagePath必填,其他参数都有默认值,都是可选的。

    裁剪的宽高比是可以约束的,只需要设置aspectRatio属性,就可以约束裁剪的宽高比。在裁剪用户头像时,需要裁剪正方形图片时,aspectRatio属性便会变的非常有用,此时,设置aspectRatio为1,就可以裁剪出正方形的图片。

      onLoad: function (options) {
    
        cropper = this.selectComponent('#cropper');
        cropper.fnInit({
          imagePath:'/assets/test.jpg',       //*必填
          debug: true,                        //可选。是否启用调试,默认值为false。true:打印过程日志;false:关闭过程日志
          outputFileType: 'jpg',              //可选。目标文件的类型。默认值为jpg,jpg:输出jpg格式图片;png:输出png格式图片
          quality: 1,                         //可选。图片的质量。默认值为1,即最高质量。目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。
          aspectRatio: 1.25,                  //可选。裁剪的宽高比,默认null,即不限制剪裁宽高比。aspectRatio需大于0
          minBoxWidthRatio: 0.2,              //可选。最小剪裁尺寸与原图尺寸的比率,默认0.15,即宽度最小剪裁到原图的0.15宽。
          minBoxHeightRatio: 0.2,             //可选。同minBoxWidthRatio,当设置aspectRatio时,minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到。
          initialBoxWidthRatio: 0.6,          //可选。剪裁框初始大小比率。默认值0.6,即剪裁框默认宽度为图片宽度的0.6倍。
          initialBoxHeightRatio: 0.6          //可选。同initialBoxWidthRatio,当设置aspectRatio时,initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到。
          });
      }

    canvas画布裁剪逻辑已经封装好,只需要调用组件的fnCrop方法便可以完成裁剪。

      fnSubmit:function(){
        //do crop
        cropper.fnCrop({
    
          //剪裁成功的回调
          success:function(res){
             //生成文件的临时路径
            console.log(res.tempFilePath);
            wx.previewImage({
              urls: [res.tempFilePath],
            })
          }
    
        });
      }

    组件源码 和 裁剪demo 放在github: 

    https://github.com/light-wind/wx-cropper

     

     

     

     

    展开全文
  • 微信小程序 制作分享朋友圈的图片

    千次阅读 2018-03-20 18:31:09
    由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求。查阅各种资料,发现基本思路有两种,一种是后端实现,另一种是前端实现,后端实现的方式这里就不...

    由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求。查阅各种资料,发现基本思路有两种,一种是后端实现,另一种是前端实现,后端实现的方式这里就不讨论了,因为我是不懂后端的,只会前端的东西,所以这里就记录一下前端的实现方法。

    前端要实现分享到朋友群,都是通过canvas做一张图片,然后用户手动分享朋友圈。前端具体要做的就是把要分享的页面用canvas重做一遍,生成一个图片,保存这个图片到用户本地相册。

    要想用canvas,需要在页面上使用canvas标签,把它定位到页面之外,以免影响页面,在绘制图片时,图片的地址必须是通过微信下载图片后返回的虚拟地址,要不canvas无法绘制出来,接下来最主要的就是canvas的使用了,小程序的canvas和h5的canvas一样,并没有多大的区别。

    下面是一个例子:

    首先是在页面上创建canvas

    index.wxml

    <view class="canvas-box">
            <canvas canvas-id="myCanvas" style="width:100%;height:{{windowHeight}}px;"></canvas>
    </view>
    <button bindtap='startDraw'>分享朋友圈</button>

    写一个样式把canvas定位到页面之外,以免影响页面的效果

    .canvas-box{
        width: 100%;
        position: fixed;
        left: 0;
        top: 999999rpx;
      }

    接下来就是绘图了,具体可以参考绘图文档

    startDraw:function(){
      const ctx = wx.createCanvasContext('myCanvas');
        
        let windowWidth = wx.getSystemInfoSync().windowWidth;
        let windowHeight = wx.getSystemInfoSync().windowHeight;
        let _this=this;
        this.setData({
          scale: 1.6
        });
    
        ctx.setFillStyle('#333');
        ctx.fillRect(0, 0, windowWidth, 100);
        ctx.setFontSize(20);
        ctx.setFillStyle('#fff');
        ctx.fillText('开始绘制图片', 30, 50);
        ctx.setFillStyle('#FFF');
        ctx.fillRect(0, 70, windowWidth, 600);
    
        ctx.setFillStyle('#666');
        ctx.setFontSize(19);
        ctx.fillText('我是标题',100, 140);
        
        ctx.setFontSize(20);
        ctx.fillText('微信小程序文本部分',20 , 170);
    
        ctx.draw()
    }

    到这为止,canvas绘图是做完了,现在要把canvas绘制的图形转化为图片,调用微信小程序已有的接口,接上面方法内:

    wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: windowWidth,
          height: windowHeight,
          destWidth: windowWidth,
          destHeight: windowHeight,
          canvasId: 'myCanvas',
          success: function (res1) {
            console.log('朋友圈分享图生成成功:' + res1.tempFilePath);
          }
    });
    这样就完成了分享图片的制作。







    展开全文
  • 报价单制作小程序

    千次阅读 2019-07-04 12:03:50
    “街寻价目表”制作小程序,可以进行快速编辑商品图片,进行转发商品价目表与完成下单支付过程。可以关注街寻公众号试试。
  • 通过Java的图片叠加技术实现校徽投降的制作,上传头像开始制作,叠加在校徽上
  • 微信图片小程序源码

    2018-04-03 22:23:06
    本程序是微信小程序开发的看图软件,包含了小程序完整应用示例,是学习微信小程序开发的不二之选
  • Python 爬取小程序接口图片

    千次阅读 2019-03-21 18:51:29
    之前我开发过一个「校徽头像制作」的微信小程序,目前陆陆续续添加了有几百来所高效校徽,用户数也有 1w+ 了。 校徽之前都是自己手动一个一个添加到服务器的,效率很低,导致如今都还有很多校徽缺失,体验不好。 这...
  • 微信小程序实现图片上传功能

    万次阅读 多人点赞 2017-09-07 10:24:37
    这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //上传图片 uploadImage: function () { var that = this; wx.chooseImage({ count: 1, //最多可以选择的图片...
  • 微信小程序 图片的缩放和裁剪

    千次阅读 2018-09-24 17:01:57
    下面博主将会通过图文讲解的方式跟大家分享微信小程序开发过程中关于图片的缩放和裁剪,最后附上源码! 要设置了的高宽才会有缩放的概念(不然就会使用小程序的默认高宽320) aspectfill,会将图片变成你设置的image...
  • 之前公众号推过一个校徽头像制作的工具类小程序,通过图片叠加的技术,实现头像与校徽图片的叠加,并生成新的头像图片,今天首先教大家制作小程序前台界面。 1、创建工程 打开微信开发者工具,新建一个工程,输入...
  • 微信小程序图片显示不全

    万次阅读 2016-11-29 15:49:25
    最近小程序蛮火。  直入主题: 对于一张网络图片高度太高,而显示不全如何解决?  其实我一贯的观点是,所有的问题从api中都能够找到答案,只是有时候缺少耐 心,而没有好好去读官方api,出现问题后着急的google...
  • 如何制作微信小程序

    千次阅读 2020-07-01 23:42:07
    微信小程序–开启二维码时代 WeChat小程序简介 微信小程序是2017年由腾讯开发的一种以微信为载体的微信小程序。在发布会上总裁骄傲的说到:相比较于app微信小程序不需要下载安装,只需要进行搜索就能使用,只需要扫...
  • 首先就是这个封面是一些图片展示界面,后台返回的都是图片。然后根据返回数据数组的下标进行分类,第一排只显示数组为1,4,7一次类推,第二列是2,5,8的index,第三列是3,6,9等等,根据下标进行分类然后排版。没...
  • 最近做小程序遇到一个功能: 从列表进入的详情页面,有生成海报的功能,这个功能用canvas就可以实现,我之前的文章有哦。附上链接 只是这次的功能上要在海报上加上生成当前页面的小程序码,分享出去朋友识别就能进入...
  • 小白如何制作一个微信小程序

    万次阅读 多人点赞 2018-08-20 22:16:17
    微信小程序一般都有image(微信小程序中需要的一些按钮的图片和其他图片)、pages(微信小程序的各个页面的编写)、util、这些组成,建议看微信小程序开发官方介绍理解这些之间的关系有利于加深对微信小程序开发的...
  • 微信小程序——图片识别

    千次阅读 多人点赞 2020-01-03 13:55:11
    我的微信小程序 期末大作业——基于百度大脑API的图片识别小程序 具体实现了动物识别、植物识别、车辆识别 三个功能 实验源码已经放到了我的GitHub,欢迎测试修改 下面给大家分享该项目的实验报告???? 目录1 概述...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图 触发条件 <block wx:if='{{bg_hui_show}}'> <view class='bg_hui' catchtap='hide_bg_hui'></view> <...
  • 微信小程序制作表格代码

    万次阅读 2017-07-24 22:40:42
    微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 参数 内容 {{item.code}} {{item.text}} {{item.type}}
  • 要在小程序中实现图片放大缩小是着实不容易呀,还要把用户选择的指定区域生成图片,简直令人发指。不多说,上烧鸡(代码)首先还是先来看看要实现的效果用户可以在指定的区域中滑动,放大,缩小自己的图片,点击确定...
  • 制作微信小程序组件

    千次阅读 2016-12-21 14:27:36
    对于小程序,我们也可以封装我们需要的一些公共的东西。这里我们讲解一个小插件。如上图所示,一个小插件,单击是展开,在单击关闭的时候,按钮关闭。页面的WXML (APP.wxml) <view class="com-widget-iconList {{
  • 技术小白之微信小程序图片加文字链接

    万次阅读 多人点赞 2018-09-26 19:38:09
    说到图片和文字的链接就不得不理下思路:首先我想要在小程序内显示图片文字信息,且在点击目标图片或文字时,可以转到我希望到达的另一个目标页面,这就表示我们需要在图片和文字外围用navigator将它们包裹住,其次...
  • 微信小程序背景图片设置问题

    万次阅读 2018-02-04 19:32:27
    我们都知道,用css给网页设置背景图片,可以导入网络图片和本地图片。 1. 网络图片: 元素定位{ background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=...
  • 对于那些不懂互联网、不了解小程序的小白、新手来讲,又如何制作小程序呢? 接下来,我们就分享下详细的教程: 一、小程序注册与认证 1、如果有已认证的服务号,可选择【复用公众号资质】快速注册认证小程序,首次可...
  • 微信小程序图片鉴黄

    千次阅读 2019-08-24 14:41:23
    小程序不允许添加qq.com域名,故需要nginx转发 上传链接 https://check.com/wxa/img_sec_check?api=img_sec_check&access_token=XXXX nginx转发 location / { if ( $arg_api = img_sec_check ){ # 图片...
  • 先上效果图:不同的图片只需要更换不同的图片路径即可,canvas画布的大小受项目影响自行调整。下边上代码:wxml:&lt;canvas canvas-id='myCanvas' style='width:500px;height:500px;backg...
  • 小程序云开发实现上传图片功能

    万次阅读 多人点赞 2019-04-04 18:53:29
    1、小程序上传图片功能实现需要注意以下几个点: (1)图片最多上传9张(默认) (2)上传后的图片会生成一个临时的地址,用过这个临时地址将图片上传到数据库 (3)图片保存的位置是在云开发控制台的 本地存储中 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 92,278
精华内容 36,911
关键字:

如何制作小程序图片