图片转码base64
- 在css阶段我们知道对图片的处理,优化等需求,对于极小或者极简单的图片我们可以处理成编码64的图片,
它有以下好处: - 1.无额外请求。
- 2.对于极小或者极简单的图片。
- 3.可以向单独图片使用,比如背景图片的重复使用。
- 4.没有跨域问题,无需考虑缓存、文件头、cookies问题。
- 在canvas中我们也可以把canvas画布转换成base64编码格式储存成图片使用。
- 通过
img
标签的src
属性获得到的是图片的绝对路径,不是相对路径。图片转成base64方式
方式一:通过fileReader实例对象
===>fileRead.readAsDataURL(files);
12345678910111213<input type="file" id="myfiles" onchange="sub()">//js====function sub(){var files=document.getElementById("myfiles").files[0];var fileRead=new FileReader(files);fileRead.readAsDataURL(files);fileRead.onload=function(e){var base64=e.target.result;var img=new Image();img.src=base64;document.getElementsByTagName("body")[0].appendChild(img);}}方式二:canvas画布转成base64格式图片
===>canvas.toDataURL();
1234567891011ctx.beginPath();ctx.fillStyle="pink";ctx.fillRect(100,100,200,200);function sub(){var base64=mycanvas.toDataURL();console.log(base64);var img=new Image();img.src=base64;document.getElementsByTagName("body")[0].appendChild(img);}
setInterVal
和window.requestAnimationFrame(act);
- 通过
setInterVal
和window.requestAnimationFrame(act);
来实现canvas动画 - 前者使用定时器使我们常用的动画办法,可是这种办法太过消耗性能,为了更加优化代码和节约计算机性能,我们采用
window.requestAnimationFrame(act);
办法。 - 相比较计时器,后者更加节省性能,更加完善,更加适合做动画。
- 计时器里,我们可以通过改变执行函数的描述来改变动画的速度,后者可以通过
取余
来减慢动画执行的速度。 - canvas动画的执行过程就是不断的清空画布,更新开始画的起始点,然后再绘制图片,机会产生动画效果。1234567891011var num=0;var num1=0;function test(){num++;if(num%100==0){num1++;document.title=num1;}window.requestAnimationFrame(test);}test();//执行该函数
canvas视频
- 在canvas画布上不仅可以画图片,还可以画视频,同样也可以根据
ctx.getImageData(video,0,0)
来获取视频的所有像素点,进而对视频进行像素的有关反色,变色处理。123456789101112function act(){ctx.beginPath();ctx.drawImage(video,0,0);res=window.requestAnimationFrame(act);}act();//取消此动画cancelAnimationFrame(act);//播放视频video.play();//暂停视频video.pause();