캔버스의 잘못된 base64

한 가지 문제를 해결하기 위해 며칠간 노력하지만 불가능한 이유를 이해할 수 없습니다. 캔버스에 그림이 그려지지만 파생이 잘못된 base64를줍니다. 나는 왜 그런지 이해하지 못했습니다. 방금 시작했는데 훌륭한 경험 자바 스크립트가 없었어요. 할 수있는 초보자를 도와주세요.캔버스의 잘못된 base64

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;

출처

2014-06-24 Snowman

캔버스에 그려진 어떤 이미지가 웹 페이지 코드와 동일한 도메인에서 시작해야 context.toDataURL 방법을 실행합니다.

그렇지 않으면 도메인 간 보안에 실패하고 브라우저는 .toDataURL을 거부합니다.

도메인 간 이미지를 가져 와서이 보안 문제가 해결되지 않은 것 같습니다.

체크 아웃 CORS 보안 :

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

여기에 예를 작업 코드와 데모입니다 : http://jsfiddle.net/m1erickson/76xF3/

이 예제는 크로스 도메인 준수하는 방식으로 이미지를 제공하도록 구성된 서버에서 이미지를 가져가 . 서버에서 여러 구성을 조정해야합니다. 또한 코드 crossOrigin = "anonymous"에 주목하십시오. 이것이 클라이언트 측의 코드로, 교차 원 영상을 허용합니다 (서버가 먼저 올바르게 구성되어야 함). 내가 예를 들어 A에 대한 동일한 폴더에 사진을 찍을 경우에도 스크립트가 작동하지 않습니다

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

출처

2014-06-24 03:22:53 markE

'1.JPG', B '2.JPG'그는 여전히 그림이 내가 작업을 추가 한 – Snowman

을 .png를 비울 것 내 답례. 웹 서버를 사용하여 페이지 코드와 이미지를 전달하고 있습니까? 서버없이 로컬 파일 시스템에서 .html + .jpg를 실행하면 도메인 간 제한을 충족시키지 못하기 때문에 묻습니다. 제한 사항을 피하려면 제대로 구성된 서버가 필요합니다. 건배! – markE

thaks ... 그것의 작품. – Snowman

캔버스의 잘못된 base64

답변

관련 문제