Question

尝试几天解决一个问题，但我无法理解为什么这是不可能的。在绘制的画布图片中，但派生给出了错误的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;

Answer 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>

来自canvas的错误的base64

1 个答案: