生成一段代码用来展示canvas.toDataURL()方法的使用
时间: 2024-03-16 09:19:15 浏览: 128
检索词的方法-快速解决canvas.todataurl 图片跨域的问题
好的,以下是使用canvas.toDataURL()方法展示图片的样例代码:
```javascript
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
const img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
};
img.src = "./myImage.png";
```
这段代码首先获取了一个`canvas`对象和一个2D渲染上下文`context`,然后创建了一个`Image`对象加载一张图片,待图片加载完毕后,将其绘制到`canvas`上,最后通过调用`canvas.toDataURL()`方法生成了一张base64编码的图片数据URL,并将其打印到控制台上。
阅读全文