JavaScript 学习笔记【canvas】

心已赠人 2022-11-28 13:54 149阅读 0赞

### JavaScript 学习笔记【canvas】 ###

*  下载图片
 *  图片转 base64
 *  踩坑
 *   *  1、生成 Base64 时报错
 *  参考资料

# 下载图片 #

var canvas = document.querySelector('#app canvas');
    var strDataURI = canvas.toDataURL("image/png");
    var image=strDataURI.replace("image/png", "image/octet-stream");
    window.location.href=image;

# 图片转 base64 #

<img id="img" src="img/logo.png"/>
    <canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas");
    var img = document.getElementById("img");
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    canvas.toDataURL("image/png", 1);

# 踩坑 #

## 1、生成 Base64 时报错 ##

Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.  
根源还是跨域。 `canvas` 上加载了跨域的图片。我踩这个坑时懵了好久，因为我是在使用 `echarts` 时想将图表转成图片遇到的这个问题。不记得自己往表图里画了个`logo`地址用的是线上服务器，结果我在本地调试。。。坑

# 参考资料 #

[MDN Canvas教程][MDN Canvas]

--------------------

[MDN Canvas]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 学习笔记【canvas】

JavaScript 学习笔记【canvas】下载图片图片转 base64 踩坑 1、生成 Base64 时报错参考资料下

心已赠人/ 2022年11月28日 13:54/ 0 赞/ 150 阅读

相关 Canvas学习笔记——马赛克案例

这篇文章要讲的是如何将一张照片变成马赛克的照片，利用`Canvas`中操作像素的方法可实现。马赛克的原理无非就是视觉上把原来的像素大小放大，将若干个小像素组成一个块变成大像素，

忘是亡心i/ 2022年09月05日 00:10/ 0 赞/ 247 阅读

相关 Canvas学习笔记——Canvas基础用法

Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的`<canvas>`元素来绘制图形。Canvas API主要聚焦于2D图形。`<canva

系统管理员/ 2022年09月04日 10:56/ 0 赞/ 270 阅读

相关 HTML Canvas 学习笔记

<table> <thead> <tr> <th> </th> <th> </th> <th> </th>

﹏ヽ暗。殇╰゛Y/ 2022年09月02日 14:44/ 0 赞/ 192 阅读

相关 JavaScript笔记：使用canvas绘图

不用说，HTML5 添加的最受欢迎的功能就是canvas元素。这个元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。 IE9+、

「爱情、让人受尽委屈。」/ 2022年07月16日 02:57/ 0 赞/ 222 阅读

相关 javascript 学习笔记

注释 “//”表示单行注释 “/\ \/”可以用来多行注释变量 1.变量必须使用字母、下划线(_)或者美元符($)开始。 2.然后

系统管理员/ 2022年06月15日 06:20/ 0 赞/ 233 阅读

相关 Javascript学习笔记10 Canvas绘图

基本用法要使用`<canvas>`元素，必须先设置width和height属性，指定画布大小。注意width和height是不带单位的 <canvas id=

梦里梦外;/ 2022年05月28日 13:24/ 0 赞/ 206 阅读

相关 Canvas入门学习笔记

1. 什么是Canvas？ 1.canvas标签是HTML5中的一个标签，是一个绘制面板(画布) 2.需要结合js代码进行操作，canvas定义为页面的一

淡淡的烟草味﹌/ 2022年04月04日 13:50/ 0 赞/ 268 阅读

相关 Echarts学习笔记（一）canvas\svg

[官网下载echarts][echarts]：（选择其一即可） [完整版echarts.min.js][echarts.min.js] [源代码版echarts.

水深无声/ 2022年02月02日 16:05/ 0 赞/ 493 阅读

相关 javascript学习笔记

javascript是一种轻型的.解释型的程序设计语言.而且具有面向对象的能力.该语言的通用核心已经嵌入了Netscape.Internet Explorer和其他的Web浏览

左手的ㄟ右手/ 2022年01月07日 09:29/ 0 赞/ 314 阅读