图片和Canvas的相互转换

来源：互联网发布：豆腐软件编辑：程序博客网时间：2024/05/21 07:08

兼容性：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;}

阅读全文

0 0