canvas做静态图片波动(代码片段)

晚星@ 晚星@     2022-12-04     112

关键词:

用到的技术css, js,canvas, svg
第三方库TweenMax


本人对svg不是很会,也是找的相关的信息,这里提供一个好用的学习网站mdn

先来看看实现效果

说下实现这种效果的原理,首先在最下面有张图片,然后在图片上面创建了一个画布,这个画布可以自己手动去画,当然如果你没有此需求你可以设置成一张固定的图片(这里主要用的css是mask-image,不知道的小伙伴可以去搜下)他会把你画布中的你绘制的区域拿出来,然后咱代码下方有个svg是把这块区域弄完波纹,但是不是动态的,所以这时候用到了TimelineMax这是一个提供动画的库,类似于css动画但是比那个要丰富,就弄成了上图效果。我试过不用TimelineMax用定时器来模拟波纹,但是很丑,不推荐用。

html

<section class="bg"></section>
  <main id="sketch">
    <canvas id="canvas" data-img=""></canvas>
    <div class="mask">
      <div id="maskInner" class="mask-inner"></div>
    </div>
  </main>
  <img src="" class="img1"></img>
  <section class="button_container">
    <button class="button">清除画布</button>
    <button class="button"><input class="input" type="file" id="upload">切换图片</button>
  </section>
  <svg xlmns="http://www.w3.org/2000/svg" version="1.1" style="display: none;">
    <filter id="heat" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feTurbulence id="heatturb" type="fractalNoise" numOctaves="1" seed="2" />
      <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="22" in="SourceGraphic" />
    </filter>
  </svg>

css

* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;


body, html 
  height: 100%;
  overflow: hidden;


body 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #121212;
  background: -webkit-linear-gradient(to bottom, #434343, #121212);
  background: linear-gradient(to bottom, #434343, #121212);

.bg 
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('../images/noise.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;

@keyframes bg-animation 
  0%  transform: translate(0,0) 
  10%  transform: translate(-5%,-5%) 
  20%  transform: translate(-10%,5%) 
  30%  transform: translate(5%,-10%) 
  40%  transform: translate(-5%,15%) 
  50%  transform: translate(-10%,5%) 
  60%  transform: translate(15%,0) 
  70%  transform: translate(0,10%) 
  80%  transform: translate(-15%,0) 
  90%  transform: translate(10%,5%) 
  100%  transform: translate(5%,0) 


main 
  cursor: -webkit-grab;
  cursor: grab;
  width: 960px;
  height: 540px;
  flex-shrink: 0;
  background-image: url('../images/bg.jpg');
  background-size: cover;
  background-position: 100% 50%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
  border: 1px groove rgba(255, 255, 255, .2);
  top: -50px;


canvas 
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


.mask 
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-mode: luminance;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-backdrop-filter: hard-light;
          backdrop-filter: hard-light;
  -webkit-mask-image: url('../images/mask.png');
  -moz-mask-image: url('../images/mask.png');
  mask-image: url('../images/mask.png');


.mask-inner 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg.jpg') 0% 0% repeat;
  background-size: cover;
  background-position: 100% 50%;
  filter: url(#heat);
  -webkit-mask-image: url('../images/mask.png');
  -moz-mask-image: url('../images/mask.png');
  mask-image: url('../images/mask.png')


.button_container 
  margin: 40px auto;
  position: fixed;
  bottom: 0;


.button 
  height: 40px;
  width: 200px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  background: #FFFFFF;
  border-radius: 12px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  color: #000000;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 1px 0 hsl(200,5%,80%),
              0 2px 0 hsl(200,5%,75%),
              0 3px 0 hsl(200,5%,70%),
              0 4px 0 hsl(200,5%,66%),
              0 5px 0 hsl(200,5%,64%),
              0 6px 0 hsl(200,5%,62%),
              0 7px 0 hsl(200,5%,61%),
              0 8px 0 hsl(200,5%,60%),
              0 0 5px rgba(0,0,0,.05),
            0 1px 3px rgba(0,0,0,.2),
            0 3px 5px rgba(0,0,0,.2),
            0 5px 8px rgba(0,0,0,.2);

.button:hover 
  background: #EFEFEF;

.button:first-child 
  margin-right: 24px;

.button .input 
  position: absolute;
  left: 0;
  top: 0;
  -webkit-appearance: none;
  display: inline-block;
  height: 100%;
  width: 100%;
  background: transparent;
  opacity: 0;
  cursor: pointer;

js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var sketch = document.getElementById('sketch');
var sketchStyle = window.getComputedStyle(sketch);
var mouse =  x: 0, y: 0 ;

canvas.width = parseInt(sketchStyle.getPropertyValue('width'));
canvas.height = parseInt(sketchStyle.getPropertyValue('height'));

canvas.addEventListener('mousemove', e => 
  mouse.x = e.pageX - canvas.getBoundingClientRect().left;
  mouse.y = e.pageY - canvas.getBoundingClientRect().top;
, false);

ctx.lineWidth = 40;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';

canvas.addEventListener('mousedown', () => 
  ctx.beginPath();
  ctx.moveTo(mouse.x, mouse.y);
  canvas.addEventListener('mousemove', onPaint, false);
, false);

canvas.addEventListener('mouseup', () => 
  canvas.removeEventListener('mousemove', onPaint, false);
, false);

var onPaint = () => 
  ctx.lineTo(mouse.x, mouse.y);
  ctx.stroke();
  var url = canvas.toDataURL();
  document.querySelectorAll('div').forEach(item => 
    item.style.cssText += `
      display: initial;
      -webkit-mask-image: url($url);
      mask-image: url($url);
    `;
  );
;

document.querySelectorAll('div').forEach(item => 
  item.style.cssText += `
    display: initial;
  `;
);

var timeline = new TimelineMax(
  repeat: -1,
  yoyo: true
),
feTurb = document.querySelector('#heatturb');

timeline.add(
  new TweenMax.to(feTurb, 8, 
    onUpdate: function () 
      var bfX = this.progress() * 0.01 + 0.025,
        bfY = this.progress() * 0.003 + 0.01,
        bfStr = bfX.toString() + ' ' + bfY.toString();
      feTurb.setAttribute('baseFrequency', bfStr);
    
  ),
0);


function clear() 
  document.querySelectorAll('div').forEach(item => 
    item.style.cssText += `
      display: none;
      -webkit-mask-image: none;
      mask-image: none;
    `;
  );


document.querySelectorAll('.button').forEach(item => 
  item.addEventListener('click', () => 
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    clear();
  )
);

document.getElementById('upload').onchange = function () 
  var imageFile = this.files[0];
  var newImg = window.URL.createObjectURL(imageFile);
  clear();
  document.getElementById('sketch').style.cssText += `
    background: url($newImg);
    background-size: cover;
    background-position: center;
  `;
  document.getElementById('maskInner').style.cssText += `
    background: url($newImg);
    background-size: cover;
    background-position: center;
  `;
;

canvas做静态图片波动(代码片段)

用到的技术css,js,canvas,svg第三方库TweenMax本人对svg不是很会,也是找的相关的信息,这里提供一个好用的学习网站mdn先来看看实现效果说下实现这种效果的原理,首先在最下面有张图片,然后在图片... 查看详情

一步一步教大家用canvas做图片滑动解锁(代码片段)

...求做滑动解锁,想来点新鲜的,于是想挑战一下,cavas做图片滑动解锁;原文链接:https://www.jb51.net/article/137129.htm我们想实现这样的效果:  首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小... 查看详情

canvas简单实现纯色背景图片抠图(代码片段)

...出目录,没有则新建*/path:path.resolve(__dirname,‘./dist‘),/*静态目录,可以直接从这里取文件*/publicPath:‘/dist/‘,/*文件名*/filename:‘matting.js‘,module:rules 查看详情

canvas简单实现纯色背景图片抠图(代码片段)

最近在研究html5canvas的过程中,发现,canvas为前端对图像的处理开辟了一条新的道路,canvas可以做到很多事情,甚至可以做个类似于PhotoShop的东西,曾经本人在一家软件工作就做类似的工作,可以看一下我之前开发的软件:这个... 查看详情

canvas获取图片中某个坐标的颜色(代码片段)

...s-get-color/ 强大的canvas可以做很多事,包括手绘,压缩图片,图片滤镜,3D效果等等。本文仅用canvas 查看详情

canvas保存图片到七牛云(代码片段)

最近在做一个项目,需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情

使用canvas和javascript做一个画板(代码片段)

...笔颜色调整笔刷粗细清空画布橡皮擦擦除撤销操作保存成图片兼容移动端(支持触摸)好了,废话少说,先看最终效果:https://zhoushuozh.gi 查看详情

vue下canvas裁剪图片(代码片段)

...一行的canvas为裁剪后展示用;div中的canvas存放原有尺寸的图片           <canvasid="canvasImg1"style="position:absolute;margin:2px000"></canvas><divid="dymImgCanv1"style="display:none;"><canvasid="dymCurrImg1":src="leftImg.carImg... 查看详情

canvas动画之二--创建动态粒子网格动画(代码片段)

...的。CSDN不能上传超过2M的图片,所以就简单截了一个静态图片:可以点击这里查看动画.下面就开始说怎么实现这个效果吧:首先当然是添加一个canvas了:<canvasid="canvas"></canvas> 查看详情

canvas应用——将方形图片处理为圆形(代码片段)

上段时间在项目中需要将方形图片处理为圆形图片,你可能会说直接用css设置border-radius:50%就可以了,但是项目中还要将此图片的圆形图片作为一部分利用canvas将其绘制到一张背景图上面,所以就有了为何要用canvas来处理了。代... 查看详情

获取cocos图片(代码片段)

...在做录制回放的项目,录制回放中的校验是可以通过图片比对进行校验,所以需要获取Cocos中的图片完成接入和适配。参考了网上大多数文章,主要是通过截图方案实现的,代码如下所示:varcanvas=document.crea... 查看详情

获取cocos图片(代码片段)

...在做录制回放的项目,录制回放中的校验是可以通过图片比对进行校验,所以需要获取Cocos中的图片完成接入和适配。参考了网上大多数文章,主要是通过截图方案实现的,代码如下所示:varcanvas=document.crea... 查看详情

获取cocos图片(代码片段)

...在做录制回放的项目,录制回放中的校验是可以通过图片比对进行校验,所以需要获取Cocos中的图片完成接入和适配。参考了网上大多数文章,主要是通过截图方案实现的,代码如下所示:varcanvas=document.crea... 查看详情

小程序--------------处理canvas导出图片模糊问题-------------劉(代码片段)

...canvas在前端生成海报,并在海报上添加上水印。最后导出图片并保存到本地。二、业务逻辑实现:  (1)创建canvas画布======》(2)在canvas上绘制海报========》(3)绘制水印===========》(4)绘制完成,导出图片路径=========》(5... 查看详情

canvas图片圆角问题(代码片段)

...是继canvas设置边框问题之后碰到的第4个问题。OriginMyGitHub图片圆角问题如果只是想要显示圆角的效果,设置border-radius就可以了,但如果要让canvas合成的图片显示为圆角,这种css方式不行。这是示例,扫描访问二维码如下。在网... 查看详情

h5上传图片之canvas(代码片段)

H5上传图片之canvas,使用canvas处理压缩图片再上传html代码:<formaction=""method="post"><dl><dd><div><divid="img_wrap"></div><inputtype="file"accept="image/jpg,image/jpeg,image/png,im 查看详情

canvas压缩图片的大小(代码片段)

使用 signature_padcanvas库生成的图片太大。但又没有提供方法来压缩。当然这是根据你canvas的画布大小决定的,某些原因导致我的画布就得是那么大。随随便便一个图片转化为base64之后就是200kb-300kb。所以得想办法压缩。思路就... 查看详情

canvas中drawimage绘制不出图片(代码片段)

在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制。//html<imgsrc="1.png"/><canvasid="draw"></canvas>//jsvarImage=document.images[0];vardraw=document.getElementById(‘draw‘);varcon 查看详情