Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may n

转载最新推荐文章于 2026-09-19 10:12:00 发布 5.6w 阅读 AI写同款

收录于

H5画布

IT有钱人

码龄13年墨衍会员 · AI 创作全网分发

269粉丝68篇原创

关注

html2canvas实战指南：从网页截图到分享海报生成在前端开发中，将网页内容直接生成图片是高频需求，分享海报、名片预览、数据报表导出等场景都离不开这项能力。Canvas作为HTML5的核心绘图技术，为前端实现图片生成提供了坚实基础。而html2canvas正是基于Canvas实现的一站式网页截图方案，它通过遍历DOM节点并重新绘制，让开发者在纯前端环境中完成从页面到图片的转换。本文聚焦网页截图的工程实践，深入解析html2canvas的核心API、清晰度控制、跨域资源处理等关键技术点，并针对常见踩坑场景给出可验证的解决方案。无论是处理用户实时生成分享海报，还阅读详情

AI摘要

本文介绍如何解决使用Canvas绘图时遇到的跨域安全异常问题，提供了两种解决方案：一是确保图片资源来自同一域名下；二是通过设置CORS跨域配置并利用JavaScript访问图片资源。

canvas绘制图片，由于浏览器的安全考虑，如果在使用canvas绘图的过程中，使用到了外域的图片资源，那么在toDataURL()时会抛出安全异常：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决方案1.

如果想使用toDataURL()生成图片文件的话，在canvas绘图过程中使用的图片应该是当前域下的。

解决方案2.

访问的服务器允许，资源跨域使用，也就是说设置了CORS跨域配置，Access-Control-Allow-Origin

然后在客户端访问图片资源的时候

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

实例说明：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="../scripts/Bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../scripts/jquery-1.11.3.min.js"></script>
    <script src="../scripts/Bootstrap-3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <img src="http://www.gongjuji.net/favicon.ico"  crossorigin="anonymous"/>
    <canvas id="canvasOne" width="200" height="200"></canvas>
</div>
<script>
    /*
    * 将canvas图片转换成图片，上传到服务器
    */
    var canvas = document.getElementById('canvasOne');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    //添加外网图片
    var img = new Image();
    //设置图片跨域访问
    //img.setAttribute('crossOrigin', 'anonymous');
    img.onload = function () {
        //画图
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var data = canvas.toDataURL('image/jpeg');
        alert(data);
    }
    //使用外网图片
    img.src = 'http://www.gongjuji.net/favicon.ico';
</script>
</body>
</html>