操纵IMG图片的大大小小缩放,CSS或JS已毕gif动态图片的甘休与播音

CSS或JS落成gif动态图表的告一段落与广播

2015/12/06 · CSS,
JavaScript ·
gif

原稿出处:
张鑫旭   

一、屋外:寒风吹,雪花飘;屋内:空调吹,代码飘

中午出去买菜,正好下雨了,还夹杂着冰珠子。鄙人大意,穿的是一件帅气但单薄的香艳大衣,立马冻成了中华田园犬。原本安顿去钓鱼的,科科,作罢,傍晚在家看中央电视台5
克利夫兰骑士(Cleveland Cavaliers)vs鹈鹕队(New Orleans Pelicans),上午补动漫码代码做小说,好生惬意。

金沙澳门官网 1

对此习惯性刷新浪的本人,总时不时会看到类似下边的游乐:

测测你和小白(白百何女士)有哪些共同点,戳开动图,发轫看清的词是什么样?ie浏览器的同桌可以按esc键(或截屏),据说在哪些词暂停,哪个词就是你啊!金沙澳门官网 2

金沙澳门官网 3

OK,
那里出现一个浏览器特性,就是经过ESC火速键,暂停gif的播报。据说FireFox浏览器在此之前也有,后来被干掉了,根据@紫云妃的传教是:

是那般的,Firefox原来的显示是:在页面load事件形成,同时x按钮变成刷新按钮之后,esc如故有多少个职能,中断当前正在发送的ajax,websocket,甘休gif,apng动画的播放.但那些功效太小众了,影响了普通用户的施用,可能不小心按了esc,结果ajax断了,网页出错了.所以Firefox20修改成:网页加载成功后,esc键完全失效.

但是,那种隐晦的但如同会影响正常功用的小技巧肯定是心有余而力不足兑现真正意义上的gif动态图片的告一段落与播音的。一是包容性,二是功效性,三是移动端没有ESC键。

故而,如果大家相见须要可以随时随处甘休gif动态图表播放的须要的时候,就要求寻找其他的出路。好,盛夏里的暖身截至,先河进入正题~~

一、图形的咬合措施

自家直接爱戴灰度图像因为自身觉着她们看起来更有艺术感。很多图纸编辑如Photoshop很不难把您的彩色图像变成灰度。甚至有取舍调整颜色深浅和色泽。不幸的是,那样的效应想做在网络上并不便于,因为浏览器大有分化。

二、gif图片自己可控前提下的办法一:多img资源支配处理

借使说,我们期望暂停的gif是团结(开发人士)传上去的,不是用户可以随心所欲上传不可控的gif.
我们得以如此处理,就是准备2套图纸,一个是gif动态图片,还有一个是只有一帧的静止的图样。然后选用JS来回切换`的src`值为那两张图纸地址就好了。

此情势吗简单,我就不放实例了。

img.src=”animate.gif”; // 或者表现的是 img.src=”static.png”;

1
2
3
img.src="animate.gif";
// 或者呈现的是
img.src="static.png";

以此艺术最大的独到之处就是包容性强,所有浏览器都可以兑现截至效果。可是,那种方式有个局限,就是,暂停时候显示的图样永远是一致张。基本上可以视为截至,而不是搁浅。

那有没有如何艺术可以真正意义上的中止呢?还真有!

法一:
img 标签是不曾 onload 事件的.所以 UBB
代码中的img用到的onload来拍卖大的图形进行自适应,那样的章程就不能选取了.
不过透过测试,body照旧得以带onload事件的,
所以我解决的方法就是在页面全体加载完后再处理太大的图片.
于是乎用JS写了一段简单的代码

globalAlpha是一个介于0和1之间的值(包含0和1),用于指定所有绘制的透明度。默许值为0。倘若拥有继续操作都要基于相同的透明度,就足以先把globalAlpha设置为适当值,然后绘制,最终在把它设置回默许值0.

//绘制一个黄色的矩形

context.fillStyle=”red”;

context.fillRect(10,10,50,50);

金沙澳门官网 4

三、gif图片自己可控前提下的章程二:CSS3 animation控制

也就是大家来看的gif效果并不是一个当真的gif图片,而是使用CSS3的animation属性控制形成的逐帧动态图表效果。我搜了下,@DO1路人乙有篇小说“css3-animation制作逐帧动画”专门介绍了那种技能。说穿了就是animation控制Pepsi-Colas图片的background-position值模拟gif效果。

例如,新版twitter的Like的效应,貌似就有接纳该技术:
金沙澳门官网 5

动用CSS3
animation已毕类gif效果的功利在于,图片可以无损,且大家能够很轻松地决定图片动画的中止和播音,使用的是:animation-play-state: paused;本条宣称。

您可以狠狠地点击那里:选择CSS3
animation达成gif动图的间歇和广播demo

点击demo页面的中断按钮,您会意识,直接就停住了,如下截图示意,截自IE10浏览器:
金沙澳门官网 6

重复点击,就会在暂停画面之后一连播放了。从而完结了俺们对动画图片的高精度控制效果。

此措施看起来完美,然而,1. IE10+等支撑CSS3 animation的浏览器才行;2.
最大的题材是图形需求是投机说了算,借使想操纵用户上传的着实含义的gif图片,只可以……望洋兴叹……………………吗?

有关代码
function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?”420″:document.images[j].width;
}
}

//修改全局透明度

 

四、自己不可能控制的gif图片的停下与播音

比方说,页面上用户上传了些gif图片,哎哎,闪瞎了自身的神州田园眼,我要任何暂停,如何是好?假设后台同学没有对gif进行静态处理,此时,只可以靠前端小伙伴,有啥方法吧?

有一个。HTML5
canvas可以读取图片音讯,绘制当前图片。于是可以已毕图片夏洛特克,模糊,色值过滤等众多图片特效。大家那边并非那么复杂,只要读取大家的图纸,重绘下就足以。

你可以狠狠地方击那里:使用JS和canvas已毕gif动图的平息和播音demo

点击按钮,然后:
金沙澳门官网 7

金沙澳门官网 8

怎样使用?
我对HTMLImageElement原型进行了扩展,扩充了stop()play()五个法子,如下:

if (‘getContext’ in document.createElement(‘canvas’)) {
HTMLImageElement.prototype.play = function() { if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null; // 透明度还原 image.style.opacity = ”; } if
(this.storeUrl) { this.src = this.storeUrl; } };
HTMLImageElement.prototype.stop = function() { var canvas =
document.createElement(‘canvas’); // 尺寸 var width = this.width, height
= this.height; if (width & height) { // 存储从前的地方 if
(!this.storeUrl) { this.storeUrl = this.src; } // canvas大小
canvas.width = width; canvas.height = height; // 绘制图片帧(第一帧)
canvas.getContext(‘2d’).drawImage(this, 0, 0, width, height); //
重置当前图片 try { this.src = canvas.toDataURL(“image/gif”); } catch(e)
{ // 跨域 this.removeAttribute(‘src’); // 载入canvas元素
canvas.style.position = ‘absolute’; // 前面插入图片
this.parentElement.insertBefore(canvas, this); // 隐藏原图
this.style.opacity = ‘0’; // 存储canvas this.storeCanvas = canvas; } }
}; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
if (‘getContext’ in document.createElement(‘canvas’)) {
    HTMLImageElement.prototype.play = function() {
        if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = ”;
        }
        if (this.storeUrl) {
            this.src = this.storeUrl;    
        }
    };
    HTMLImageElement.prototype.stop = function() {
        var canvas = document.createElement(‘canvas’);
        // 尺寸
        var width = this.width, height = this.height;
        if (width & height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧(第一帧)
            canvas.getContext(‘2d’).drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute(‘src’);
                // 载入canvas元素
                canvas.style.position = ‘absolute’;
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = ‘0’;
                // 存储canvas
                this.storeCanvas = canvas;
            }
        }
    };
}

世家倘使在页面中协调的JS文件中复制上边的代码,然后就足以直接:

var image = document.getElementsByTagName(“img”)[0]; // 停止gif图片
image.stop(); // 播放gif图片 image.play();

1
2
3
4
5
var image = document.getElementsByTagName("img")[0];
// 停止gif图片
image.stop();
// 播放gif图片
image.play();

//zxx:
上边代码并未详细测试,以及可能的心得难题(IE闪动)没有切实可行处理(影响原理示意),若要实际运用,须要团结再微调完美下。

不足

  1. IE9+支持。IE7/IE8不支持canvas没搞头。
    2.
    只可以甘休gif,没办法确实含义的中止。因为canvas获得的gif图片新闻为第一帧的音信,前面的一般获取不到。要想完毕暂停,而不是停止,还索要更为探讨,假设您有措施,卓殊欢迎分享。

然后 在 body 上助长 onload=”ReImgSize()” 就可以了.
通过测试,在Mozilla和IE上通过.
在此处补充一下有关
图片的自适应,那一点Mozilla做的比IE好,因为可以用CSS来决定图片的自适应.
我们都晓得 Mozilla 帮衬一个 max-width
的CSS语法.于是,大家如此那样定义图片的大局样式

context.globalAlpha=0.5;

//绘制青色矩形

context.fillStyle=”blue”;

操纵IMG图片的大大小小缩放,CSS或JS已毕gif动态图片的甘休与播音。context.fillRect(30,30,50,50);

1、CSS Filter

五、结束语

是胡不是霍,是霍躲但是!哈哈!
金沙澳门官网 9
上边那么些gif也是demo示意gif强力候选。后来一探讨,看本身文章的照旧宅男多,腐女少,所以,你懂的……
金沙澳门官网 10

——我是多年不见的低调的分隔线—–

正文gif比较多,若是您是运动设备查看本文,会发现,怎么我的电池组怎么越来越瘦了!不是因为天冷冻小了,而是gif比较功耗。所以,从那几个角度讲,大家实在有必不可少在活动端默许甘休这个gif的播放,用户点击再播放。一来省流量,二来省电。

要是没有静态图片资源扶助,那不妨尝试小说出现的有些措施,有心得记得来此地申报哈!
金沙澳门官网 11

最后,本文的艺术都是有瑕疵的,自己也没有在实际上项目中拔取过。由此,假设阅读本文的你:

  1. 有更周密的gif暂停与广播方式;
  2. 察觉文中方法有欠缺和疏漏;

都丰富期望得以不吝赐教!

感谢阅读!周末和煦!

 

1 赞 6 收藏
评论

金沙澳门官网 12

连带代码 
img{
max-width:100%;height:auto;
}

//重置全局透明度

  使用CSS过滤器属性可能是最简便易行的主意把图像成为灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果蕴含灰度。

那般图片就回在div或table内自动适应其尺寸了.

context.globalAlpha=0;

//那些事例中红色矩形会显示半晶莹剔透效果,透过它可以看出下边的革命矩形。

  现在,过滤器属性是CSS3正规的一片段,并匡助在局地浏览器,Firefox、Chrome和Safari。从前,大家也论及Webkit过滤器,它不仅将图像成为红色也可以成为紫色和混淆效果。

那也是一种很简短有效的点子:利用CSS+JS让图片自动缩放-图片不变形

globalCompositionOperation表示绘制后的图形怎样与先绘制的图样组成。那一个特性的值是字符串,可能的值如下:

source-over(默许值):后绘制的图样位于先绘制的图样上方。

source-in:后绘制的图形与先绘制的图形重叠的部分可知,两者其余一些完全透明。

source-out:后绘制的图形与先绘制的图形不重叠的一部分可知,先绘制的图样完全透明。

source-atop:后绘制的图形与先绘制的图样重叠的有些可知,先绘制图形不受影响。

destination-over:后绘制的图形位于先绘制的图样下方,后绘制的图样唯有以前透明像素下的一对才可知,被遮挡的一些不可知。

destination-in:后绘制的图片位于先绘制的图纸下方,两者不重叠的局地完全透明。就是显示重叠的片段的造型,突显先绘制的图样的颜色。

destination-out:后绘制的图形擦除与先绘制的图样重叠的有些。

destination-atop:后绘制的图形位于先绘制的图形下方,在两者不重叠的地方,先绘制的图片会变透明。

lighter:后绘制的图样与先绘制的图样重叠部分的值相加,使该片段变亮。(叠加的是颜色额)

copy:后绘制的图样完全代表与之重叠的先绘制图形。

xor:后绘制的图样与先绘制的图样重叠的有些举行“异或”操作;图像异或,相异为1,相同为0.即重叠部分不出示,不重叠部分显得。

//画目的图

context.beginPath();

context.fillStyle=”red”;

context.fillRect(100,50,100,300);

//画源图

context.beginPath();

context.globalCompositeOperation=”destination-out”;

//context.globalCompositeOperation=”xor”;

context.fillStyle=”blue”;

context.arc(250,200,100,0, Math.PI*2);

  添加如下CSS样式可以将图像成为蓝色

.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7
*/

对象图像:已经停放画布中的绘图

img { 
-webkit-filter: grayscale(1);/* Webkit */ 
filter:gray;/* IE6-9 */ 
filter: grayscale(1);/* W3C */ 
}
  支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)

* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ?
100 : auto);
height: expression(this.height > 100 ? 100 : auto);

源图像:打算放置到画布中的绘图

在使用globalCompositionOperation的景色下必将要多测一些浏览器,因为分化的浏览器对这一个特性的落实仍然存在较大的差异。


  (注意:那段代码在Firefox上无意义。)

法二:

二、使用图片

//第一种写法:第二个参数:图片对象;首个参数是起先画的x坐标;第八个参数:开始画的y的坐标;

//context.drawImage(img,0,0);

//第三种写法:首个参数:图片对象;首个参数:是发端画的x坐标;第多少个参数:起头画的y的坐标;第多少个参数:图片绘制到canvas上的涨幅;首个参数:图片绘制到canvas上的万丈;

//context.drawImage(img,0,0,200,200);

//第二种写法(裁剪):首个参数:图片对象;第二三个参数在原图上要裁剪的初步x、y的坐标;第四、八个参数:在原图上要裁剪的宽和高;第六、七个参数:要松手canvas画布上的起初x、y坐标;第八九个参数:要到canvas画布上的宽和高;

context.drawImage(img,100,100,100,100,50,50,300,300);

var  canvas=document.getElementById(“myCanvas”);

var   context=canvas.getContext(“2d”);

  2、Javascript

此前是判断heigth和width,然后再决定何人除什么人再乘什么人。怎么没有想到可以那样:?heigth和width只保留一个性能即可。

var   img= newImage();

  第两种格局是由此接纳JavaScript技术上理应协理所有JavaScript的浏览器,包涵IE6以下

function resizeImg(img) {
try {
   if (img.offsetWidth > 0) {
    if (img.offsetWidth > img.height) {
     img.width = img.height;
     img.removeAttribute(‘height’);

img.src=”img/20150821130732_anQeR.jpeg”;

  代码来自Ajax Blender.

    }
   }
   else {
    setTimeout(function() {resizeImg(img);}, 50);
   }
}
catch (ex) {
   ;
}
}

img.onload=function(){

varimgObj = document.getElementById(‘js-image’); 
functiongray(imgObj) { 
varcanvas = document.createElement(‘canvas’); 
varcanvasContext = canvas.getContext(‘2d’); 

<img onload=’resizeImg(this);’ height=’220′
src=’upload/200812052052440545.gif’>

context.drawImage(img,100,100,100,100,50,50,300,300);

varimgW = imgObj.width; 
varimgH = imgObj.height; 
canvas.width = imgW; 
canvas.height = imgH; 

简短代码是一种简单但不简单的考虑,是一种美。

}

canvasContext.drawImage(imgObj, 0, 0); 
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 

艺术三:(可以操纵图片高、宽在高于规定范围的时候才缩放)

汇总应用drawImage( )和其余办法,可以对图像举行各个基本操作。而操作的结果可以经过toDataURL( )方法获得。但是有一个例外,即图像不可以来自其余域。假设图像来自其他域,调用toDataURL( )会抛出错误。

for(vary = 0; y < imgPixels.height; y++){ 
for(varx = 0; x < imgPixels.width; x++){ 
vari = (y * 4) * imgPixels.width + x * 4; 
varavg = (imgPixels.data[i] + imgPixels.data[i + 1] +
imgPixels.data[i + 2]) / 3; 
imgPixels.data[i] = avg; 
imgPixels.data[i + 1] = avg; 
imgPixels.data[i + 2] = avg; 


canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width,
imgPixels.height); 
returncanvas.toDataURL(); 

imgObj.src = gray(imgObj);
  3、SVG

function resizeImgX(img,iwidth,iheight)
{
   var _img = new Image();
   _img.src = img.src;
   if(_img.width > _img.height)
   {
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
      img.height = (_img.height / _img.width) * img.width;
   }
   else if(_img.width < _img.height)
   {
      img.height = (_img.height > iheight) ? iheight :
_img.height;
      img.width = (_img.width / _img.height) * img.height ;
   }
   else
   {
      img.height = (_img.height > iheight) ? iheight :
_img.height;
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
   }
}

canvas提供了toDataURL的接口,可以一本万利的将canvas画布转化成base64编码的image。近来支撑的最好的是png格式,jpeg格式的现世浏览器基本也支撑,不过协理的不是很好。

  第二种艺术来自SVG
Filter.,你要求成立一个SVG文件,并将以下代码写在里边,保存命名为***.svg

调用:
<img onload=’resizeImg(this,500,400);’
src=’upload/200812052052440545.gif’>

//我们创立一个画布,在地点做一些绘制,然后试着把它保存为本地图片。

var  can = document.getElementById(‘canvas’);

金沙澳门官网 ,var  ctx = can.getContext(‘2d’);

var   imgA = new Image();

imgA.src =’

/uploads/2013/09/css_yangshijiance.png’;

imgA.onload = function() {

ctx.drawImage(imgA, -25, 0, imgA.width, imgA.height);

ctx.restore();

};

var   imgB = new Image();

imgB.src = ‘

/uploads/2013/09/canvas_chroma.png’;

imgB.onload = function() {

ctx.globalAlpha = 0.1

ctx.drawImage(imgB, -100, -75, imgB.width, imgB.height);

ctx.restore();

};

function toImage(returnType) {

<svgxmlns=” ; 
<filterid=”grayscale”> 
<feColorMatrixtype=”matrix”values=”0.3333 0.3333 0.3333 0 0 0.3333
0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/> 
</filter> 
</svg>
  然后使用过滤器的习性,我们得以经过SVG文件中的元素的ID连接SVG文件

方法四:
<script language=”JavaScript”> 
<!– 
function ResizeImages()
{
var myimg,oldwidth; 
var maxwidth=180; //缩放周全 
for(i=0;i <document.images.length;i++){
myimg = document.images[i]; 
if(myimg.width > maxwidth)

oldwidth = myimg.width; 
myimg.width = maxwidth; 
myimg.height = myimg.height * (maxwidth/oldwidth); 


}
//–> 
</script>

var dataURL = document.getElementById(‘canvas’).toDataURL(“image/png”);

// The returnType argument specifies how to get the

// the image.  ‘obj’ will set the source to an image element.

// ‘window’ will open a new window and display the image.

// ‘download’ will prompt the user to save the image.

switch(returnType) {

case ‘obj’:

var imgObj = new Image();

img { 
filter:url(‘img/gray.svg#grayscale’); 
}
  你也足以把它放到CSS文件中,例如:

imgObj.src = dataURL;

document.getElementById(‘graphics’).appendChild(imgObj);

break;

case ‘window’:

window.open(dataURL, “Canvas Image”);

break;

case ‘download’:

dataURL = dataURL.replace(“image/png”, “image/octet-stream”);

img { 
filter:url(‘url(“data:image/svg+xml;utf8,<svg%20xmlns=’
“);’) 
}
  总结

<script language=”JavaScript”>
<!–
//图片按百分比缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的幅度,允许的惊人)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){ 
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+”×”+image.height;
}
else{
if(image.height>iheight){ 
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height; 
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+”×”+image.height;
}
}

//–>
</script>

document.location.href = dataURL;

break;

}

}

可观的意况是页面上有五个点击链接:

1、Image Tag

点击会有一张图纸插入在网页中。

2、New Window

开辟一个新的窗口,并呈现一个PNG格式的图形

3、Download

下载保存一张PNG个格式的图片

很不幸,点击并不曾显示,为何吧?作者做了广大测验,原因出在图片渲染上,canvas上一经添加图片,toDataURL()将失效,获取不到canvas音信。通过不难几步来验证那么些题材。

把js脚本中图纸渲染的一些去除,A和B图。为了便利观望,在画布上画一个大致的矩形,填充颜色:

ctx.fillStyle = ‘Red’;

ctx.strokeStyle = ‘Green’;

ctx.beginPath();

ctx.rect(20, 20, 100, 100);

ctx.stroke();

ctx.fill();

那样画布上便显得为一个黄色矩形,格式为PNG


  为了能过跨浏览器帮忙灰度的效果,我们可以把上述措施和一道使用下边的代码片段去贯彻。那段代码将帮衬Firefox
3.5+, Opera 15+, Safari, Chrome, and IE

调用:<img src=”images/toplogo.gif”
onload=”javascript:DrawImage(this,100,100)”>

三、裁剪

var  canvas=document.getElementById(“myCanvas”);

var  context=canvas.getContext(“2d”);

//绘制一个三角

context.beginPath();

context.moveTo(200,200);

context.lineTo(250,200);

context.lineTo(225,150);

context.closePath();

context.stroke();

img { 
-webkit-filter: grayscale(100%); 
-webkit-filter: grayscale(1); 
filter: grayscale(100%); 

//调用裁剪

filter:url(‘../img/gray.svg#grayscale’); 
filter:gray; 
}
  大家可以运用方面的代码和JavaScript方法和只提供CSS滤波器作为后备防止JavaScript被剥夺。这几个想法可以很不难地Modernizr的相助下促成的。

context.clip();

var  img= newImage();

img.src=”img/20150821130732_anQeR.jpeg”;

img.onload=function() {

context.drawImage(img,0,0);

}

.no-js img { 
-webkit-filter: grayscale(100%); 
-webkit-filter: grayscale(1); 
filter: grayscale(100%); 

//你下边画的是怎么形象,裁剪出来的就是怎样模样


filter:url(‘../img/gray.svg#grayscale’); 
filter:gray; 
}
  OK了,你的浏览器上能够看看很炫的机能了!!

四、使用图像数据

var  canvas=document.getElementById(“myCanvas”);

var   context=canvas.getContext(“2d”);

//getImageData()取的原本图像数据

//有多个参数:第一二个参数,起始获得像素的x,y坐标,第三多少个参数,获取像素点的宽高。

//var  ImageData=context.getImageData(0,0, img.width, img.height);

此间重临的靶子是getImageData()的实例,每个getImageData()对象都有五个特性:width、height、data。

width和height表示访问像素区域大小

//其中data属性是一个数组,保存着图像中每一个像素的多少。

//在data数据中,每一个像素用4个要一贯保存,分别表示红、绿、蓝和透明度。

//数组中的每个元素都是介于0和255中间的,可以一贯访问到原来图像数据,

//就可以以各个措施来操作那个数量。

var  img= newImage();

img.src=”img/20150821130732_anQeR.jpeg”;

img.onload=function() {

context.drawImage(img,0,0);

var   ImageData=context.getImageData(0,0, img.width, img.height);

var   data=ImageData.data;

//注意:每便循环控制变量i都递增4,在取得每个像素的红、绿、蓝颜色值后,

//计算出她们的平均值,再把这些平均值设置为各种颜色的值,

//结果就是去掉了各类像素的水彩,只保留了亮度接近的灰度值.(用彩色变黑白)

for(var i=0; i<data.length; i+=4){

var  r=data[i];

var  g=data[i+1];

var  b=data[i+2];

//求rgb的平均值,

var  gray=(r+g+b)/2;

//设置颜色值

data[i]=gray;

data[i+1]=gray;

data[i+2]=gray;

}

//putImageData()方法把图像数据绘制到画布上,有七个参数

//第四个参数,获取ImageData,第二多个参数,要放权画布上的x,y坐标

context.putImageData(ImageData,0,0);

}


五、canvas摄像处理

function animation( ){

//video.ended 属性重临音频/摄像是不是已为止。重回值:布尔值true|false。即使播放已停止,则赶回 true。否则再次来到 false。

if(!video.ended){

//将视频的每一帧,绘制在canvas上

context.drawImage(video,0,0,canvas.width,canvas.height);

window.requestAnimationFrame(animate);

}

}

//当视频可以播放时,举办播放调用循环

//video的oncanplay事件类似于图像的onload,加载成功以后

//oncanplay 事件在用户可以起来播放视频/音频(audio/video)时接触。

//object.oncanplay=function(){myScript};

//object.addEventListener(“canplay”,myScript);

video.oncanplay=function(e){

video.play( );

window.requestAnimationFrame(animate);

}


六、canvas动画

最原始的您还足以利用window.setTimout()或者window.setInterval()通过不断更新元素的事态地方等来落到实处动画,前提是画面的更新频率要达到每秒60次才能让眼睛看到流畅的卡通效果。

window.requestAnimationFrame()通过递归调用同一方法来不断更新画面以达到动起来的职能,但它优于set提姆eout/setInterval的地点在于它是由浏览器专门为动画提供的API,在运转时浏览器会自动优化措施的调用,并且只要页面不是激活状态下的话,动画会自动刹车,有效节约了CPU费用。

打消该次动画:可以平昔调用,也得以经过window来调用,接收一个函数作为回调,再次来到一个ID值,通过把那么些ID值传给window.cancelAnimationFrame()可以打消该次动画。

window.requestAnimationFrame()方法用于告诉浏览器,你想在浏览器的下个重绘
以前来执行一个卡通或者执行浏览器通过调用一个一定的函数来更新动画的央浼。该方法会在下次重返从前实施一个当做参数的回调函数。

window.requestAnimationFrame
是专门为促成高品质的帧动画而规划的一个API,近来已在多个浏览器得到了帮衬,包涵IE10+,Firefox,Chrome,Safari,Opera等,在运动设备上,ios6之上版本以及IE
mobile
10上述也支撑requestAnimationFrame,唯一比较遗憾的是当下安卓上的原生浏览器并不协理requestAnimationFrame,不过对requestAnimationFrame的支撑应该是任天由命了,安卓版本的chrome
16+也是永葆requestAnimationFrame的。

例子window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;


七、落成多少个小球随机运动,用面向对象的主意

var   canvas=document.getElementById(“myCanvas”);

var   context=canvas.getContext(“2d”);

//圆是一个类,就是目的唯有一个,就是圆

functionCircle(x,y,r,speedX,speedY,color) {

//所有的性质

this.r=r;

this.x=x;

this.speedX=speedX;

this.speedY=speedY;

this.y=y;

this.color=color;

}

//在原型上写方法,

//首个点子,画圆

Circle.prototype.draw=function() {

context.beginPath();

context.fillStyle=this.color;

context.arc(this.x, this.y, this.r,0, Math.PI*2);

context.fill();

}

//第二个主意,运动

Circle.prototype.move=function() {

//那里改变x递加的值,可以转移运动速度

this.x+=this.speedX;

this.y+=this.speedY;

if(this.x>=canvas.width-this.r||this.x<=this.r) {

this.speedX*= -1;

}

if(this.y>=canvas.height-this.r||this.y<=this.r) {

this.speedY*= -1;

}

}

//进行实例化操作

//落成同时出现多少个小球,须要同时实例化出多少个对象

//储存new出来的实例化对象数组

var   arr=[ ];

//来广大个小球

for(var  i=0; i<100; i++) {

//设置一个随机的半径

var   R=randomNum(30,5);

//随机地方

var   X=randomNum(canvas.width-R, R);

var    Y=randomNum(canvas.height-R, R);

//随机速度

var   speedX=randomNum(8,1);

var    speedY=randomNum(8,1);

//随机颜色

var    
COLOR=”rgb(“+randomNum(255,0)+”,”+randomNum(255,0)+”,”+randomNum(255,0)+”)”;

//将对像实例化

var    newCircle= newCircle(X, Y, R, speedX, speedY, COLOR);

arr.push(newCircle)

}

moveCircle();

//定义一个举办动画的函数

function    moveCircle() {

//先清理画布

context.clearRect(0,0, canvas.width, canvas.height);

//循环执行实例化对象的数组

for(var  i=0; i<arr.length;i++){

arr[i].draw();

arr[i].move();

}

//执行动画

window.requestAnimationFrame(moveCircle);

}

//定义一个随便数的函数

functionrandomNum(max,min) {

returnparseInt(Math.random()*(max-min+1)+min);

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图