Canvas转图片，图片转Canvas_java canvas转图片-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41820577/article/details/103627635

本文介绍了如何在JavaScript中将Canvas转换为图片以及将图片转换为Canvas。对于Canvas转图片，利用toDataURL方法获取canvas的地址，然后设置到Image对象的src属性，再将其添加到页面。对于图片转Canvas，通过监听图片的onload事件，在加载完成后使用drawImage方法将图片绘制到canvas上。

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

Canvas转图片

知识点：toDataURL
原理：可以理解为获取到canvas的地址，创建一个Image对象，把这个Image对象的src设置为获取到的canvas的地址，然后将这个Image添加到指定的div元素中

<canvas id="canvas" width="200" height="200"></canvas>
<div id="pic"></div>

let canvas = document.getElementById('canvas');
let cavContent = canvas.getContext('2d');
cavContent.fillStyle = 'green';
cavContent.fillRect(0,0,200,80);

let img = new Image();
img.src = canvas.toDataURL('image/png');// 获取到canvas元素的data URL（data URL是以data开头的url，组成部分：前缀（data：）、指示数据类型MiME类型、base64的可选标记，数据本身）

// 例子：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAQN0lEQVR4Xu3XWXLcVhAAQfLmurl9AYkEarC8Jf0rNgbI7ogKf3/9+frvy38ECPxd4M/XNxoCBP4u8C0gToPADwIC4jwI/FNAQBwHgZ8EBMR9EBAQN0AgCQhIYjO0h4D/A9ljz76yCghIlTO3gYCAbLBkn/iBgIB8gGd0dQEBWX3Dvu8zAQH5zM/00gICsvR6fdzHAgLyMaEHrCsgIOvu1pddISAgVyh6xqICArLoYn3WRQICchGkx6woICArbtU3XScgINdZetJyAgKy3Ep90KUCAnIpp4etJSAga+3T11wtICBXi3reQgICstAyfcoNAgJyA6pHriIgIKts0nfcIyAg97h66hICArLEGn3EbQICchutB88vICDz79AX3CkgIHfqevbkAgIy+QK9/s0CAnIzsMfPLCAgM2/Pu98vICD3G/uFaQUEZNrVefFHBATkEWY/MqeAgMy5N2/9lICAPCXtdyYUEJAJl+aVHxQQkAex/dRsAgIy28a877MCAvKst1+bSkBAplqXl31cQEAeJ/eD8wgIyDy78qZvCAjIG+p+cxIBAZlkUV7zJQEBeQnez84gICAzbMk7vicgIO/Z++XhBQRk+BV5wVcFBORVfj8+o=

let pic = document.getElementById('pic');
pic.appendChild(img);

添加后元素嵌套如下：
在这里插入图片描述
且div中的img尺寸继承了canvas的尺寸

图片转Canvas

知识点：onload、drawImage
原理：获取到图片元素，图片加载完成后通过drawImage方法将图片绘制到canvas画布中

<img src="./柴犬.png" id="img" style="display: none">
<canvas id="canvas" width="400" height="400" style="border: 1px solid orange"></canvas>

let img = document.getElementById('img');
img.onload = function () {// 必须等到图片加载完才能进行下面的操作，如果图片未加载完执行下面操作，canvas可能会出现一段时间空白，等图片加载完成才显示
    let canvas = document.getElementById('canvas');
    let canContent = canvas.getContext('2d');
    let w = img.width;
    let h = img.height;
    canContent.drawImage(img, 80,80,w, h);
}