精华内容
下载资源
问答
  • 微信小程序画布保存图片
    2021-10-20 14:21:44

    点击保存图片

    //点击保存图片
      saveimg() {
        let that = this
        wx.showLoading({
          title: '正在保存',
          mask: true,
        })
        wx.canvasToTempFilePath({
          canvasId: 'canvas-demo',//对应画布id
          success: (res) => {
            console.log(res);
            wx.hideLoading();
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function (res) {
                console.log(res);
                wx.showToast({
                  title: '保存成功',
                })
                that.setData({
                  modalName: null,
                })
              },
              fail: function (res) {
                console.log(res);
                if (res.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
                  wx.showModal({
                    title: '请打开相册授权',
                    success(res) {
                      if (res.confirm) {
                        wx.openSetting({
                          success: function (data) {},
                          fail: function (data) {
                            console.log("openSetting fail", data);
                          }
                        });
                      } else if (res.cancel) {
                        console.log('用户点击取消')
                      }
                    }
                  })
                }
              }
            })
          },
          fail: function (res) {
            console.log(res);
          }
        });
    
    更多相关内容
  • 微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟。 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口。 首先来看一下构建这样一个小程序所...
  • 微信小程序画布canvas

    2018-08-19 21:11:02
    微信小程序,画图板制作 画图,画布canvas,源码下载,
  • 微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟。 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口。 首先来看一下构建这样一个小程序所...
  • 本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas xss=removed canvas-id=canvasid></canvas> js // ...
  • 小程序画布的使用

    2021-10-29 07:39:01
    第一步 定义出来画布的位置在一个看不见的位置 第二步 根据getImageInfo方法定义位置尺寸 大小 贴上图片 关键在于定时器的先后顺序 先铺设背景图 再在背景图上贴上自己需要的元素 这里需要用上定时器 保证图片层级在...

    便于理解 现在拆分来一步步的看
    点击保存按钮之后
    第一步 定义出来画布的位置在一个看不见的位置
    第二步 根据getImageInfo方法定义位置尺寸 大小 贴上图片
    关键在于定时器的先后顺序 先铺设背景图 再在背景图上贴上自己需要的元素 这里需要用上定时器 保证图片层级在这里插入代码片关系的先后顺序,
    下面展示一些 内联代码片。

    SaveCard:function(){
        var that = this
        const ctx = wx.createCanvasContext('share');
        that.setData({
          loadingHidden: false
        })
        wx.getImageInfo({
              src: that.data.activeimage,
              success: function (res){        
                ctx.drawImage(res.path,0,0,375,812);
                ctx.setFontSize(18)
                ctx.fillStyle = '#f8e6b2'
                ctx.fillText(that.data.nickName,76,125)
                wx.getImageInfo({
                  src: that.data.avatarUrl,   
                  success: function (res){
                    ctx.save()
                    ctx.beginPath()
                    ctx.arc(48,118,20,0,2*Math.PI)
                    ctx.clip()
                    ctx.drawImage(res.path, 28,98,40,40);
                    ctx.restore()
                    setTimeout(function(){
                      ctx.draw(false, function () {
                        that.setData({
                          loadingHidden: true
                          })
                          wx.canvasToTempFilePath({
                          canvasId: 'share',
                          success: function success(res) {
                          wx.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res) {
                              wx.showToast({
                                title: '保存图片成功!',
                              })
                            },
                            fail(res) {
                              wx.showToast({
                                title: '保存图片失败!',
                              })
                            }
                          })
                          
                          }, 
                          fail: function (e) {}
                          });
                      })    
                      },1000)
                  }
                })
                that.setData({
                  loadingHidden: false
                })
              }
            })
            that.setData({
              loadingHidden: true
            })
      },
    
    
    展开全文
  • 画布组件其实就是用来画一些官方文档没有提供的东西,这里要注意官方属性的使用,因为属性正好截图一个屏幕,...小程序画布组件</text> <!-- canvas-id声明id方便获取canvas的上下文 --> <canvas s

    画布组件其实就是用来画一些官方文档没有提供的东西,这里要注意官方属性的使用,因为属性正好截图一个屏幕,所以就不用手打的形式了,直接贴图啦~~~。

    属性

    在这里插入图片描述

    代码演示

    1.首先我们在.wxml文件中创建一个canvas组件,并指定id:

    <!--miniprogram/pages/index/index.wxml-->
    <text>小程序画布组件</text>
    
    <!--
      canvas-id声明id方便获取canvas的上下文
    -->
    <canvas style="width:600rpx;height:600rpx;" canvas-id="canvas"></canvas>
    

    2.在.js文件的onReady方法中通过id获取到上下文,并绘制一个圆:

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
        /**
         * 获取上下文
         */
        var context = wx.createCanvasContext('canvas');
    
        //描述绘制颜色
        context.setStrokeStyle("#ff0000");
        //设置绘画线条的宽度
        context.setLineWidth(2);
    
        //将起点移动到 x160 y100的位置
        context.moveTo(160,100);
    
        // x y 半径 弧度 画圆 是否逆时针
        context.arc(100,100,60,0,2*Math.PI,true);
    
        //将路径庙会出来
        context.stroke();
    
        //将园画到canvas上面
        context.draw();
    },
    

    3.看一下效果图,可以看到画布上面绘制了一个红色的圆,绘制过程的相关注释也已经写在代码上面了:

    在这里插入图片描述
    4.圆绘制好了我们在圆的基础上面添加一些东西,接下来画一个微笑的嘴巴,首先将我们的画笔移动到context.moveTo(140,100);的位置,然后绘制context.arc(100,100,40,0,Math.PI);我们就可以看到下面的效果:

    在这里插入图片描述
    5.然后我们绘制左眼和右眼,首先要将画笔move移动到指定绘制,然后进行绘制:

    /**
    * 绘制笑脸 左眼
    */
    context.moveTo(85,80);
    context.arc(80,80,5,0,2*Math.PI,true);
    
    /**
    * 绘制笑脸 右眼
    */
    context.moveTo(125,80);
    context.arc(120,80,5,0,2*Math.PI,true);
    

    6.看一下效果图:
    在这里插入图片描述
    7.贴一下js文件所有代码:

    // miniprogram/pages/index/index.js
    
    Page({
      /**
       * 页面的初始数据
       */
      data: {
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        /**
         * 获取上下文
         */
        var context = wx.createCanvasContext('canvas');
    
        //描述绘制颜色
        context.setStrokeStyle("#ff0000");
        //设置绘画线条的宽度
        context.setLineWidth(2);
    
        //将起点移动到 x160 y100的位置
        context.moveTo(160,100);
    
        // x y 半径 弧度 画圆 是否逆时针
        context.arc(100,100,60,0,2*Math.PI,true);
    
        /**
         * 绘制笑脸 嘴巴
         */
        context.moveTo(140,100);
        context.arc(100,100,40,0,Math.PI);
    
        /**
         * 绘制笑脸 左眼
         */
        context.moveTo(85,80);
        context.arc(80,80,5,0,2*Math.PI,true);
    
        /**
         * 绘制笑脸 右眼
         */
        context.moveTo(125,80);
        context.arc(120,80,5,0,2*Math.PI,true);
    
        //将路径庙会出来
        context.stroke();
    
        //将园画到canvas上面
        context.draw();
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
      },
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        console.log("hide  监听页面隐藏....比如从一个页面跳转到另外一个页面");
      },
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        console.log("unload  监听页面卸载....关闭当前页面");
      },
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    画布的简单使用到这里就结束了,更多使用方法以及例子可以查阅小程序画布组件官方文档

    展开全文
  • 微信小程序画布绘制 生成上下文 ctx = wx.createCanvasContext('canvasID'); 对应的节点信息 <canvas canvas-id="canvasID" class="canvas-one" style="width:{{width}}px;height:{{height}}px"> </...

    微信小程序画布绘制

    生成上下文

    ctx = wx.createCanvasContext('canvasID');
    

    对应的节点信息

    <canvas canvas-id="canvasID" 
    	class="canvas-one"
    	style="width:{{width}}px;height:{{height}}px">
     </canvas>
    

    获取对应的手机屏幕的大小

    wx.getSystemInfo({
        success: res => {
            rpx = res.windowWidth/375; // 像素比/iPhone6大小
            this.setData({
              width: res.windowWidth,
              height: res.windowHeight
            })
        }
    })
    

    canvas 是在一个二维的网格当中,左上角的坐标为(0, 0)

    网络图片在画布中不显示的,所以要这样操作,转换成临时图片

    wx.getImageInfo({
        src: img,
        success: res => {
            this.setData({
            	img: res.path
            }) 
        }
    });
    
    ... ctx.drawImage(img, 0, 0, 150, 100);
    

    绘制图像,drawImage,绘制图像,图像保持原始尺寸,参数: 路径,x 坐标,y 坐标,宽度,高度

    ctx.drawImage(path, 0, 0, 150, 100);
    

    填充画布背景色, 填充坐标 (x, y, with, height)

    ctx.setFillStyle('#f6f6f6');
    ctx.fillRect(0*rpx, 0*rpx, width, height);
    

    绘制文字及大小

    ctx.setFontSize(15*rpx);
    ctx.fillStyle = "#666";
    ctx.fillText("字体", 24*rpx, 341*rpx);
    

    metrics测量文本尺寸信息,目前仅返回文本宽度

    const metrics = ctx.measureText('Hello World');
    console.log(metrics.width);
    

    导出图片

    导出图片,把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径

    wx.canvasToTempFilePath({
        x: 100,
        y: 200,
        width: 50,
        height: 50,
        destWidth: 100,
        destHeight: 100,
        canvasId: 'myCanvas',
        success: function(res) {
          	console.log(res.tempFilePath)
        } 
    })
    

    保存图片

    saveCanvas: function(){
        wx.showLoading({title: '海报生成中'});
         setTimeout(() => {
             wx.hideLoading();
             wx.canvasToTempFilePath({
                 x: 0,
                 y: 0,
                 canvasId: 'canvasID',
                 fileType: 'png',
                 success: res => {
                     let url = res.tempFilePath;
                     wx.getSetting({ //询问用户是否保存相册到本地
                         success: set => {
                             if (set.authSetting['scope.writePhotosAlbum']) {
                              wx.saveImageToPhotosAlbum({
                                     filePath: url,
                                     success: (res) => {
                                         Tools.$Toast('海报已为您保本地');
                                     }
                                 })  
                                 
                             } else {
                                Tools.$Toast('保存失败!请开启访问手机相册权限');
                                 wx.authorize({
                                     scope: 'scope.writePhotosAlbum',
                                     success: res => {
                                         wx.saveImageToPhotosAlbum({
                                             filePath: url,
                                             success: (res) => {
                                                 Tools.$Toast('海报已为您保本地');
                                             }
                                         }) 
                                     },
                                     fail: res => { 
                                         wx.showModal({ title: '保存失败', 
                                             content: '请开启访问手机相册权限',
                                             success(res) {
                                                 if (res.confirm){
                                                     wx.openSetting(); // 无效
                                                 }
                                             } 
                                         }) 
                                     }
                                 })                
                             }
                         }
                     })
                 },
                 fail: function (res) {
                     Tools.$Toast('海报获取失败');
                 }
             })
         }, 600);
      },
    
    展开全文
  • 最近圣诞节就要到了,于是想为我的小程序添加个圣诞帽生成的功能,可以为你的头像选择圣诞帽,然后生成图片到本地。看下效果图,有兴趣的小伙伴也可以扫小程序码体验一下 在开发这个功能的过程中,遇到了一些小...
  • 小程序画布使用

    千次阅读 2018-05-07 15:22:09
    最近开发了一款自己的小程序,名字叫做哎呦天气,在这个小程序中有两处使用到了画布canvas,所以在此总结一下。首先看一下我用canvas做的两个效果:第一张截屏中的折线图和第二张截屏中的带有二维码的图片都是使用...
  • wx 小程序画布

    2021-12-30 16:34:50
    let that = this wx.getSystemInfo({ success: (res) => { console.log(res); } }); 先在onLoad里面获取屏幕...在wxml 里面写上画布标签 id 别忘了css样式设置宽高 var w, phoneT, addressT; if (platfo..
  • 绘制微信小程序画布时钟

    千次阅读 2016-12-24 09:37:13
    在之前的文章里http://blog.csdn.net/weixin_36185028/article/details/53786993分享了用Html5画布绘制了mac时钟,微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟。 总体思路是对...
  • 微信小程序画布渲染文字换行 封装换行函数 // 文字换行 drawText: function(ctx, str, leftWidth, initHeight, canvasWidth) { var lineWidth = 0; var lastSubStrIndex = 0; // 每次开始截取的字符串的索引 ctx...
  • 主要介绍了微信小程序 wxapp画布 canvas的相关资料,需要的朋友可以参考下
  • 微信小程序运用画布canvas签名,并生成图片demo,供学习者参考
  • 微信小程序画布canvas功能

    千次阅读 2019-05-08 20:40:37
    首先在wxml上设置一个宽高...总结:刚开始试着去弄个小程序功能,会感觉很难,但是你会慢慢发现它的布局差不多和HTML一样的,只不过是把HTML中的div换成了View.css和wxss基本是一样的.重点的是API的调用.由于刚接触,只...
  • 需求是在滑动页面的情况下,各个组件不偏离,而且滑块可以单一的调节背景的透明度,而不调节画布的透明度。 我大致说一下我自己的做法,图片中,滑动时,组件不偏离的情况,是直接设置画布的view的...
  • 直接可以复制粘贴到uniApp 里面,代码如下:@touchmove="canvasMove" @touchend="canvasEnd" @touchcancel="canvasEnd" @error="canvasIdErrorCallback">清除确定// canvas 全局配置var context = null;...
  • 微信小程序画布手写签名

    万次阅读 2018-02-08 09:49:19
    微信小程序手写画板界面布局&lt;view class='content'&gt; &lt;canvas class='firstCanvas' canvas-id="firstCanvas" bindtouchmove='move' bindtouchstart='start' bindtouchend='...
  • 小程序画布电子签名(实例)

    万次阅读 热门讨论 2018-10-12 13:38:51
    <view class='container'>...-- 签名画布 --> <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bin...
  • 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影响体验 2.保证图片完整性,使用image组件的mode属性,可以设置图片裁剪、缩放的模式,...
  • 标题微信小程序画布在真机上显示不了(手机上不支持网络图片) 生成海报在手机上是不支持有网络图片的不然在真机上是显示不了的,所有要先把网络图片变成本地图片.js wx.downloadFile({ url: '网络图片链接', success...
  • 微信小程序画布详解

    千次阅读 2016-12-12 18:09:29
    有的时候需要插入动画,这时就需要用到画布,接下来浅谈一下画布的功能和用法吧 wxml代码 ;height:637px" canvas-id="plainId" class="canvas" bindtap="click" bindtouchmove="move">其中“canvas-id”为当前幕布...
  • 完整微信小程序(Java后端) 技术贴目录清单页面(必看) 画布组件,我们可以做一些绘图和动画效果。2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护。相关api:获取 ...
  • 123.gif (38.61 KB, 下载次数: 18) 下载附件 2017-1-6 01:12 上传   代码示例: [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ...//获取应用实例
  • 微信小程序使用canvas绘图的时候发现不同手机的不一样!有可能画布没画满!有可能超了!也出现一些问题在此记录分享 1.绘制的图片只能是本地路径,开发者工具是可以网络图片的!手机不行!所以要下载:wx....
  • 基于微信小程序canvas开发的图表控件,适用于wepy框架 > 暂时只有折线图,后续提供更多的图表 使用 安装组件 npm install wepy-com-charts --save 引用组件 import wepy from 'wepy'; import Charts from '...
  • 通过小程序canvas原生组件方法,实现对画布的基本操作并扩展相关功能,实现在线签名功能,支持翻页、撤销、清空、生成图片,并增加田字格底图

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,419
精华内容 14,567
关键字:

小程序画布

友情链接: libzmq-4.3.1.zip