HTML5中canvas标签的使用
最近直接是跟图片结上缘了,前有一个相册的功能让我来负责,现在又是一个头像编辑的功能负责,这个完了之后还有一个关于图片的功能要负责。
先说说最近的这个功能吧,其实这个功能就跟新浪微博中的那个头像编辑功能是一样的。不过新浪微博的那个头像编辑功能是用flash实现的,而自己也不会flash。所以只能通过另一种方式,使用js和css在前台来控制用户有那种剪裁的视觉效果,然后在把剪裁的坐标传回后台,让后台来实现对图片的剪裁。开始找到了jquery的jcrop插件,很容易的实现动态拖动剪裁框,实时有预览效果。但是这个插件并不能实现图片的旋转,所以想到用html中的canvas来实现图片的旋转。
刚开始通过后台传递过来的上传的图片的服务地址,但是新建一个Imgae的对象,然后通过drawImage(img, 0, 0, img.width,img.height); 方法来绘制这张图片到canvas上,但是不管怎么样图片就是不能绘制,后来我在这个方法执行之前加了个alert,图片竟然会绘制出来。这样我想应该是在这个绘制方法执行之前可能是img并没有完全加载完,后来竟然想着是否加延时。但是通过谷歌发现,其实可以执行
img.onload=function(){ context.drawImage(img, 0, 0, img.width, img.height);},这个就是检查如果img加载完在执行这个方法,问题解决!