来自画布的错误 base64答案

【问题标题】：Wrong base64 from canvas来自画布的错误 base64
【发布时间】：2014-06-24 03:05:44
【问题描述】：

尝试几天解决一个问题，但我不明白为什么这是不可能的。在画布中绘制的图片，但推导给出了错误的 base64。我不明白为什么。我刚开始，并没有很好的javascript经验。帮助一个可以的新手。

HTML：

<canvas id="canvas" width="400" height="300"></canvas> <textarea id="base64" rows="10" cols="80"></textarea> <img id="image">

JAVASCRIPT

function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; for(var src in sources) { numImages++; } for(var src in sources) { images[src] = new Image();
images[src].onload = function() {
  if(++loadedImages >= numImages) {
    callback(images);
  } };
images[src].src = sources[src];}} var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var sources = { a: 'http://www.prairiedogmag.com/wp-content/uploads/2012/08/Cute-Animals-office-bat-4-200x300.jpg',   b: 'http://worldnewspress.net/wp-content/uploads/2014/03/happiest-animals-all-time-18-200x300.jpg' }; loadImages(sources, function(images) { context.fillStyle = "red"; context.fillRect(0, 0, 400, 300);  context.drawImage(images.a, 0, 0, 200, 300); context.drawImage(images.b, 201, 0, 200, 300); });  var url = document.getElementById('base64').value =document.getElementById('canvas').toDataURL(); document.getElementById('image').src = url;

【问题讨论】：

标签： javascript canvas html5-canvas base64 html2canvas

【解决方案1】：

要执行context.toDataURL 方法，画布上绘制的任何图像都必须来自与网页代码相同的域。

如果不是，则跨域安全失败，浏览器将拒绝执行 .toDataURL。

看起来您正在提取跨域图像，因此没有解决这个安全问题。

检查 CORS 安全性：

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

这是示例工作代码和演示：http://jsfiddle.net/m1erickson/76xF3/

此示例从配置为以跨域兼容方式传递图像的服务器获取图像。必须在服务器上进行多项配置调整。还要注意代码：crossOrigin="anonymous"。那就是客户端的代码，允许跨域图像（服务器必须先正确配置）。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/character1.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/character3.png");
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            img.crossOrigin="anonymous";
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.src = imageURLs[i];
        }      
    }

    function start(){

        // the imgs[] array now holds fully loaded images
        // the imgs[] are in the same order as imageURLs[]

        context.fillStyle = "red"; 
        context.fillRect(0,0,120,110);  
        context.drawImage(imgs[0], 0, 0, 60, 110); 
        context.drawImage(imgs[1], 60, 0, 60, 110); 
        var url = document.getElementById('base64').value =canvas.toDataURL(); 
        document.getElementById('image').src = canvas.toDataURL();

    }


}); // end $(function(){});
</script>
</head>
<body>
    <h4>The canvas</h4>
    <canvas id="canvas" width=120 height=110></canvas>
    <h4>The image created from the canvas .toDataURL</h4>
    <img id="image">
    <h4>The base64 encoded image data</h4>
    <textarea id="base64" rows="10" cols="80"></textarea>
</body>
</html>

【讨论】：

脚本不起作用即使我在同一个文件夹中拍照例如a：'1.jpg'，b：'2.jpg'他仍然会清空图片.png
我在答案中添加了一个工作示例。您是否使用 Web 服务器来提供页面代码和图像。我问是因为从本地文件系统（没有服务器）执行 .html + .jpgs 不会满足跨域限制。您将需要一个正确配置的服务器来避免这些限制。干杯！