使用h5的canvas提供的接口很容易实现一些动画,如果能把这些动画实现成gif动图就更好啦，还真有大神实现啦这个功能下面说明使用方法开源库地址https://github.com/jnordberg/gif.js首先引入需要的js文件gif.js在页面里自己创建一个canvas并且在它上面画一些动画js附件在后面下载然后就是gif的使用方法啦vargif=newGIF({workers:2,quality:10});//添加一个图片标签对象像素到当前帧gif.addFrame(imageElement);//或添加一个canvas对象的像素到当前帧gif.addFrame(document.

首先取到绘画的上下文信息varcanvas=document.createElement('canvas');varcontext=canvas.getContext('2d');有这两个方法context.save();//保存当前画布状态context.restore()//恢复最近一近的画布保存状态主要是当对画布有如下转换操作之前可以先使用context.save();保存画布当前状态,方便下面的图画好后需要恢复画布原来的状态时调用context.restore();看下面例子,比如给你一个A4纸大小的画板让你先在最上面画三个小正方形如下代码context.fillStyle='#f00

最近再做gif动态图,生成的格式为blob格式的,pc浏览器都可以正常运行,但是用到微信中却发现blob格式的图片分享发送不了,最后把blob格式转成base64格式后发送正常,下面是一个转换的函数blob图片格式转成base64图片格式,varblobToBase64=function(blob,callback){vara=newFileReader();a.onload=function(e){callback(e.target.result);}a.readAsDataURL(blob);};//使用方法,传入一个blob数据,在回调中接收处理成功的图片urlblobToBase64(

有两个函数一个缩放一个剪切成圆,都返回一个base64格式的png图片,直接放到image的src标签就可以使用原图缩放剪切成圆过后/***生成图片的缩略图*@param{[type]}img图片(img)对象或地址*@param{[type]}width缩略图宽*@param{[type]}height缩略图高*@return{[type]}returnbase64png图片字符串*/functionthumb_image(img,width,height){if(typeofimg!=='object'){vartem=newImage();tem.src=img;img=tem;}var

jquery实现做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面借用jquery实现这个功能首先看下面函数$('#dom').offset().top//元素的绝对偏移量,指元素的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变$('#dom').outerHeight()//元素的实际尺寸,即height+padding+border$('#dom').outerHeight(true)//#dom的实际尺寸及外边距,即height+padding+border+margin$(window).scrollTop()//窗口

如下代码varim=newImage();im.src='./0.jpg';canvas.drawImage(im,_x,0,this.width,this.height,0,0,cw,ch);下面代码运行后可能为空白,是因为newImage加载图片是异步加载的,图片还没有加载到浏览器下面的代码已经开始使用啦，处理方法是等图片加载完后再调用下面的画图代码,要放到图片加载完成的回掉函数里面如下写一个加载图片的带回调的函数,functionloadImage(url,callback){//创建一个Image对象，varimg=newImage();img.src=url;//如果图片已经存在于浏

h5使用FileReader读取本地图片文件并显示到浏览器-赵克立博客!function(a,b){varshowimg=document.getElementById("showimg");varimginput=document.getElementById("file_input");if(typeofFileReader==='undefined'){showimg.innerHTML="抱歉，你的浏览器不支持FileReader";imginput.setAttribute('disabled','disabled');}else{imginput.addEventListener(

varoffsetTop=function(elem){vartop=elem.offsetTop;varparent=elem.offsetParent;while(parent){top+=parent.offsetTop;parent=parent.offsetParent;}returntop;};varoffsetLeft=function(elem){varleft=elem.offsetLeft;varparent=elem.offsetParent;while(parent){left+=parent.offsetLeft;parent=parent.offsetParent;

functionIsPC(){varsystem={win:false,mac:false,xll:false};//检测平台varp=navigator.platform;system.win=p.indexOf("Win")==0;system.mac=p.indexOf("Mac")==0;system.x11=(p=="X11")(p.indexOf("Linux")==0);//跳转语句if(system.winsystem.macsystem.xll){//转向电脑端returntrue;//是电脑}else{returnfalse;//是手机}}

扩展弹出层提示*{margin:0;padding:0;list-style-type:none;font-style:normal;}a,img{border:0;}a,a:visited{color:#5e5e5e;text-decoration:none;}a:hover{color:#4183C4;text-decoration:underline;}body{font:12px/180%Arial,Helvetica,sans-serif,"新宋体";}//注意使用前请自己引入jqueryqtip3$(function(){//msgTooltip('一个测试信息','爱你酷');}