兼容性:IE9及以上,FF,Chrome, Opera, Safari 支持 drawImage() 方法。
一、图片转 Canvas
提示:图片资源必须加载完成后才能绘制在画布上!
var img = new Image();
img.src = 'xx.jpg';
img.onload = function(){
ctx.drawImage(img, x, y); 在指定点绘制图像(原始大小)
ctx.drawImage(img, x, y, width, height); 在指定点绘制图像(使用指定的宽和高)
}
绘制图形时,可以将画笔进行旋转,旋转后绘制的图形就是倾斜的——旋转时一定要控制好轴点的位置
(轴点默认就是画布的原点——左上角)。
ctx.translate(x, y); //平移轴点/原点
ctx.rotate(degree * Math.PI / 180); //旋转画笔
图片剪切:
//sx,sy:开始剪切的x,y坐标; swidth,sheight:被剪切图像的宽高; x,y:在画布上放置图像的x,y坐标; width,height:要使用的图像的宽高(伸展或缩小图像)
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
图片转Canvas最基本的示例:
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">您的浏览器不支持Canvas!</canvas>
var canvas = document.getElementById("myCanvas");
imageToCanvas(canvas,"1.jpg");
function imageToCanvas(canvas,url) {
var img = new Image();
img.src = url;
img.onload = function(){
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
console.log(img.width + ":" + img.height);
}
}
把视频的当前帧克隆到Canvas:
(每20毫秒,代码就会绘制视频视频的当前帧)
示例:
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {
var i=window.setInterval(function() {
ctx.drawImage(v,0,0,270,135);
},20);},false);
v.addEventListener('pause',function() {
window.clearInterval(i);
},false);
v.addEventListener('ended',function() {
clearInterval(i);
},false);
二、Canvas转图片
function canvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png"); //把canvas转换成base64图像保存
return image;
}