精华内容
下载资源
问答
  • <p style="text-align:center"><img alt="" height="505" src="https://img-ask.csdnimg.cn/upload/1618411397845.png" width="800" /></p>
  •  </block>demo效果:由于小程序图片的高度没法自适应,需要给图片设置高度,所以需要在图片加载完以后,获取图片高度,等比算出显示图片高度,赋值给对应图片通常我们抓取的内容是html页面,特别是像资讯这一类的,...
  • 微信小程序中的旋转动画。...wxml <image class='yy' src='../image/yytb.png' animation='{{aaa}}'></image> 这里可以是图片也可以是view js代码 var th=this; var animation = wx.createAnimation(...

    微信小程序中的旋转动画。已下图为例
    在这里插入图片描述
    图片右上角的音乐图标需要旋转,上代码
    wxml

    <image class='yy' src='../image/yytb.png' animation='{{aaa}}'></image>
    

    这里可以是图片也可以是view
    js代码

    var th=this;
        var animation = wx.createAnimation({
          duration: 3000,//旋转速度毫秒,数值越小速度越快
          timingFunction: 'linear',
        });
    
        animation.rotate(180).step()//旋转动画180为角度.360是一周
        var param="aaa";//动画的名字,与wxml的animation一样
        var json = '{"' + param + '":""}'
        json = JSON.parse(json);
        json[param] = animation.export()
        th.setData(json)
    

    如需开发视频教程请扫描下面二维码(免费)
    在这里插入图片描述

    展开全文
  • 小程序中实现图片不停旋转

    千次阅读 2019-10-14 20:58:46
    简单直接上代码,实现图片360度不停旋转 wxml代码和wxss如下 <image class="songimg" src="http://evo-nav-media.mars-health.xyz/teacher.jpg" > @keyframes box-ani { from {transform: rotate(0)} ...

    简单直接上代码,实现图片360度不停旋转

    wxml代码和wxss如下

      <image class="songimg" src="http://evo-nav-media.mars-health.xyz/teacher.jpg" >
    
    @keyframes box-ani {
        from {transform: rotate(0)}
        to {transform: rotate(360deg)}
      }
    .songimg{
        border-radius:50%;
        position: relative;
        /* margin-left: -30rpx; */
        animation: box-ani 4s  infinite linear;
    }

     

    展开全文
  • wxml: <image class="topImage" style="width:100rpx;height:100rpx" src="/images/coupon/co.png"></image> wxss: .topImage{ animation: image 1.5s infinite; } @keyframes image { 0% { ...

    上下跳动
    wxml:

     <image class="topImage" style="width:100rpx;height:100rpx" src="/images/coupon/co.png"></image>
    

    wxss:

    .topImage{
      animation: image 1.5s infinite; 
    }
    @keyframes image {
      0% {
          transform: translate(0px, 0px);
      }
      50% {
          transform: translate(0px, -9px);
      }
      100% {
          transform: translate(0px, 0px);
      }
    }
    

    左右反转
    wxml:

     <image class="topImage" style="width:100rpx;height:100rpx" src="/images/coupon/co.png"></image>
    
    .topImage{
      -webkit-animation: transform-5 1.5s ease 500ms alternate none 1;
        animation: transform-5 1.5s ease 500ms alternate none 1;
    }
    @-webkit-keyframes transform-5 { 
    	from{   
    		-webkit-transform:perspective(400px) rotateY(91deg);
    		transform:perspective(400px) rotateY(91deg);
    	} 
        to{
        	-webkit-transform:perspective(400px) rotateY(0deg);
        	transform:perspective(400px) rotateY(0deg);
        } 
    }
    @keyframes transform-5 { 
    	from{
    		-webkit-transform:perspective(400px) rotateY(91deg);
    		transform:perspective(400px) rotateY(91deg);
    	} 
        to{
        	-webkit-transform:perspective(400px) rotateY(0deg);
        	transform:perspective(400px) rotateY(0deg);
        } 
    }
    
    展开全文
  • 微信小程序-上传图片转base64

    千次阅读 2018-07-02 16:28:21
    最近业务需要:将图片转为base64格式。 so~~~;百度n多资料最后写成,还是有一点小bug就是生成的图片不太清晰; 文章最后还有代码的下载地址 参考资料:https://github.com/zh8637688/wx-cardscanner 微信小程序...

    最近业务需要:将图片转为base64格式。
    so~~~;百度n多资料最后写成,还是有一点小bug就是生成的图片不太清晰;
    文章最后还有代码的下载地址

    参考资料:
    微信小程序文档-wx.canvasGetImageData
    UPNG.js下载地址
    代码奉上:
    wxml

    <!-- wxml -->
    <button bindtap='fetch'>上传</button>
    <canvas canvas-id='myCanvas' style="width: 400px; height: 500px;"></canvas>
    <image src='{{b64}}'></image>

    js
    这里需要引入一些转base64的js

    const upng = require('../../utils/UPNG.js')
    //可以在上面的参考资料里进行下载
    fetch() {
        const ctx = wx.createCanvasContext('myCanvas')
        const platform = wx.getSystemInfoSync().platform
        const imgWidth = 400, imgHeight=500;
        wx.chooseImage({
          success: res => {
          //生成的图片临时路径画成canvas
            ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight)
            ctx.draw(false, () => {
              wx.canvasGetImageData({
                canvasId: 'myCanvas',
                x: 0,
                y: 0,
                width: imgWidth,
                height: imgHeight,
                success: res => {
                  if (platform === 'ios') {
                    // 兼容处理:ios获取的图片上下颠倒 
                    res = this.reverseImgData(res)
                  } 
                  // 3. png编码
                  let pngData = upng.encode([res.data.buffer], res.width, res.height)
                  // 4. base64编码
                  let base64 = wx.arrayBufferToBase64(pngData)
                  // console.log('data:image/jpeg;base64,' + base64)
                  this.setData({
                    b64: 'data:image/jpeg;base64,' + base64
                  });
                },
                fail(res) {
                  console.log(res)
                },
              })
            })
          }
        })
      },
      //ios图片处理 
      reverseImgData(res) {
        var w = res.width
        var h = res.height
        let con = 0
        for (var i = 0; i < h / 2; i++) {
          for (var j = 0; j < w * 4; j++) {
            con = res.data[i * w * 4 + j]
            res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
            res.data[(h - i - 1) * w * 4 + j] = con
          }
        }
        return res
      },

    下载地址:https://download.csdn.net/download/weixin_38023551/10513997
    参考资料:https://github.com/zh8637688/wx-cardscanner

    展开全文
  • 最近业务需要:将图片转为base64格式。  so~~~;百度n多资料最后写成,还是有一点小bug就是生成的图片不太清晰;  文章最后还有代码的下载地址 参考资料: 微信小程序文档-wx.canvasGetImageData UPNG.js下载...
  • 小程序动画-图片一直旋转

    千次阅读 2018-06-05 15:49:38
    实现效果(可能有点bug就是你不能等到...可以看我的代码index.wxml&lt;view class="container"&gt; &lt;image src='/resource/images/1/blueRefresh.png' class='img' animation="{{an...
  • 《微信小程序–年签项目》图片数组翻转动画 点击图片,让图片实现翻转效果,并根据点击的卡片生成不同的卡片 小程序animation动画 主要流程是 1.定义两个数组,animationMainz[ ]记录...3.用wxml的前端页面的 e.curren
  • 本文自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml [html]view plaincopy ...
  • 本文介绍使用微信小程序API+canvas来实现图片的可拖动、放大、缩小和旋转,并可对选中的图片进行不同效果的滤镜和不同形状的切图,且可对最终效果进行保存到本地。 最终效果: 实现过程 1. 文件index.wxml和...
  • wxml: <view class="section"> <input placeholder="姓名" name="name" bindblur="name" style='background-image: url({{background1}});' /> </view> <view class="section"> <...
  • index.wxml <view> <view class="canvas-image-box"> <canvas canvas-id="shareCanvas" style="width:{{_width}}px;height:{{_heigth/1.423}}px;"/> </view> <!-- 文字提示 --> ...
  • 小程序中解决图片旋转问题

    千次阅读 2019-10-16 21:19:14
    在一些相机设备中因手持方向的原因导致图片会有一个旋转角度,在图片加载后旋转角度被忽略了,导致图片看过去是旋转的, 小程序中不需要借助任何工具获取图片信息,通过wx.getImageInfo()获取...需要在wxml...
  • 思路:用swiper实现轮播,用canvas实现旋转并把旋转后的画布图片替换当前展示的图片。 页面相关功能UI图: wxml代码: <view class="card-general"> <view>鲜牛肉检测报告</view> <...
  • 我理解后面小括号内的地址是wxml将要渲染的图片地址对吗?由于这个地址是错误的,我用replace将小括号内的地址改成了中括号内的再进行wxml的转换,结果图片还是无法渲染。</p><p>该提问来源于开源...
  • 小程序访问图片403错误

    千次阅读 2018-11-22 11:21:52
    问题描述:后台富文本编辑器,图文编辑信息,最后展示再小程序端时,出现图片403问题,无法正确显示问题。 缘由:编辑器中的图文信息,通过网上常用编辑器编辑后,复制到后台编辑器中,出现...排除 html wxml 问...
  • 微信小程序如何设置背景图片

    千次阅读 2020-04-01 22:28:21
    今天第一次来尝试微信小程序,可在了解完基本常识之后。设置背景图片就难到我 了。 CSDN上面找了一些办法,大致有以下几种:...(2)在wxml使用 (3) 设置图片大小,位置 <image src="../image/职场加班闪屏引导页...
  • 微信小程序wxParse插件图片宽高自定义设置优化

    千次阅读 热门讨论 2018-07-13 17:11:44
    在使用wxParse(version 0.3)微信小程序插件过程中,当原文内容包含图片时,wxParse对图片的转换将通过wxml中image标签的bindload事件获取图片的存储本身的宽高尺寸,进而判断该宽度与屏幕(窗口)宽度的大小,将...
  • 最近小程序这么火,我也来搞搞。发现了一个恶心的问题。小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录首先我们看眼没有被格式的富文本显示:*....(此图片来源于网络,如有
  • 本来直接用的本地图片,但结果真机调试的时候无法显示,上网查了之后知道小程序图片只能加载网络上的(直接写链接),或者是base64转码后的 style="background-image:url(../../../images/back-login.png)" 所以...
  • 微信小程序-富文本文本 最近小程序这么火,我也来搞搞。发现了一个恶心的问题。小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录 首先我们看眼没有被格式的富文本显示: *....
  • 小程序开发之旅(九)template实现文字、段落、单选框、日期、图片的输入 在小程序开发过程中,很多地方会用到一些相同的需要输入的表弟页面,具体类型有输入...WXML <template name="input"> <view class=
  • 前言 学了微信小程序后,心血来潮弄了个真心话大冒险,觉得还挺好玩,毕竟现在去...首先给出素材图片 2. wxml代码 <view class="background"> <!-- 转盘 --> <image src="../image/point1.png" bi...
  • 最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现。 首先在wxml中定义image ***.png'> 注意其中的animation属性,...
  • 本文为大家分享了微信小程序实现图片旋转、...index.wxml <view class=phone_personal>{{firstPerson}} <image src=../../image/v6.png class=personal_image></image> //三目法判断图片要不要旋转180。 <vie
  • 最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现。 wechat animation.gif 首先在wxml中定义image <image ...
  • 例如后台反的图片是字符串,需要成数组格式才能渲染 创建tools.wxs文件 // 处理图片,字符串转为数组格式 function getImgArr(img){ if(!img){ return [] }else{ return img.split(',') } } module.exports ...

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

wxml转图片