JavaScript 学习笔记【canvas】

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

JavaScript 学习笔记【canvas】

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

下载图片

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

图片转 base64

  1. <img id="img" src="img/logo.png"/>
  2. <canvas id="canvas"></canvas>
  4. var canvas = document.getElementById("canvas");
  5. var img = document.getElementById("img");
  6. var ctx = canvas.getContext('2d');
  7. ctx.drawImage(img, 0, 0);
  8. 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教程

发表评论

表情：
评论列表 （有 0 条评论，224人围观）

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

相关阅读

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

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

    忘是亡心i忘是亡心i/ 0 赞/ 346 阅读