图片和Canvas的相互转换

最新推荐文章于 2025-06-07 10:24:25 发布

转载最新推荐文章于 2025-06-07 10:24:25 发布 · 1.1k 阅读

文章标签：

#react #canvas

javascript 同时被 3 个专栏收录

11 篇文章

订阅专栏

react

5 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

本文介绍了如何将图片转换为Canvas以及如何从Canvas导出图片的方法。内容包括使用JavaScript操作Canvas元素来绘制图片、实现图片剪切、视频帧克隆等功能，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、图片转 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;
}