canvas 绘制base64
时间: 2023-08-12 09:10:19 浏览: 50
要使用 Canvas 绘制 base64 图片,我们需要先将 base64 图片转换为 Image 对象,然后再将其绘制到 Canvas 上。以下是示例代码:
```javascript
// 获取 Canvas 对象
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
// 创建 Image 对象
let img = new Image();
// 设置 Image 对象的 src 为 base64 数据
img.src = 'data:image/png;base64,iVBORw0KG...';
// 在 Image 对象加载完毕后,将其绘制到 Canvas 上
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
```
在上面的代码中,我们首先获取了 Canvas 对象和其 2D 上下文对象。接着,我们创建了一个 Image 对象,并将其 src 属性设置为我们要绘制的 base64 数据。最后,在 Image 对象加载完毕后,我们使用 drawImage 方法将其绘制到 Canvas 上。
注意,如果 base64 数据的类型是图片,那么需要在数据前添加对应的 MIME 类型,如上述代码中的 `data:image/png;base64,`。如果是其他类型的数据,需要将 MIME 类型改为对应的值。
相关问题
canvas转base64
将 canvas 转换为 base64 可以使用 canvas.toDataURL() 方法。该方法将返回一个包含图像数据的 base64 编码字符串。以下是一个示例代码:
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 绘制 canvas 图像
// 将 canvas 转换为 base64
const dataURL = canvas.toDataURL();
console.log(dataURL); // 打印 base64 编码字符串
```
请注意,如果 canvas 中包含跨域图像,则 toDataURL() 方法将无法正常工作。在这种情况下,需要使用 CORS 策略来加载图像。
保存canvas绘制后的图像
要保存 canvas 绘制后的图像,可以使用 canvas 元素的 `toDataURL()` 方法。该方法将 canvas 转换成 base64 编码的 PNG 图像,并返回一个字符串,可以将该字符串用作图像的 src 属性或者保存为文件。
下面是保存 canvas 图像的示例代码:
```javascript
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL('image/png');
// 创建一个链接并下载
var link = document.createElement('a');
link.download = 'my-image.png';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
```
这里的 `myCanvas` 是 canvas 元素的 id。`toDataURL()` 方法的参数用于指定生成的图像格式,默认为 PNG 格式。生成的 dataURL 可以用于创建一个链接并下载,也可以通过其他方式进行保存。