代码（内含注释）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
// canvas2image();//canvas转图片
// image2canvas();//图片转canvas
//canvas转图片
function canvas2image() {
//canvas画一个正方形
c.fillStyle = "#ddd";
c.fillRect(0, 0, 100, 100);
//新建Image对象，将canvas转换为base64添加到image的src属性上
var img = new Image();
img.src = canvas.toDataURL('image/jpg');
//添加到body中
document.body.appendChild(img);
}
//图片转canvas
function image2canvas() {
//新建Image对象，引入当前目录下的图片
var img = new Image();
img.src = "1.jpg";
//图片初始化完成后调用
img.onload = function() {
//将canvas的宽高设置为图像的宽高
canvas.width = img.width;
canvas.height = img.height;
//canvas画图片
c.drawImage(img, 0, 0, img.width, img.height);
}
}
}
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
