캔버스로 이미지 자르기

Question

캔버스를 사용하여 이미지를 자르고 요소로로드 할 base64 문자열을 얻으려고합니다. this post에서 예제로 작업하고 있었지만, .toDataURL()을 실행하면 base64가 잘리고 유효하지 않습니다. 난 단지 base64로 552 개 문자를 받고 오전 toDataURL을 내 jsfiddle

var image = new Image(), 
    canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'); 

image.onload = function(){ 
    ctx.drawImage(image, 
     70, 20, // Start at 70/20 pixels from the left and the top of the image (crop), 
     50, 50, // "Get" a `50 * 50` (w * h) area from the source image (crop), 
     0, 0,  // Place the result at 0, 0 in the canvas, 
     50, 50); // With as width/height: 100 * 100 (scale) 
} 

image.src = 'https://www.google.nl/images/srpr/logo3w.png'; 

var _img = document.getElementById('base64'); 
_img.innerHTML += canvas.toDataURL(); 

. 자른 이미지를 저장하고 이미지를 base64로 디코딩하면 약 3.8k 문자가됩니다.

제가 잘못하고있는 것을 볼 수 없습니다 - 어떤 아이디어입니까?

Answer 1

공개적으로 게시하기 전까지 평상시처럼 주전원이 없었습니다. 그림을 이동.

두 문제

1. 그 이미지가 실제로 캔버스에로드되기 전에 생성되고 있었기 때문에 나는 짧은 base64로 문자열을 얻고 있었다.

2. 일단 수정되면 오류가 발생합니다.

   오염 된 캔버스를 내보낼 수 없습니다.

는 I 고정 어느 -

image.setAttribute('crossOrigin', 'anonymous'); 

수정 코드를 부가함으로써 (imgur에 호스팅 된 다른 이미지를 사용하여 Google 화상 여전히 오류를 던진)의

var image = new Image(), 
    canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'); 
image.setAttribute('crossOrigin', 'anonymous'); 

image.onload = function(){ 
    ctx.drawImage(image, 
     70, 20, // Start at 70/20 pixels from the left and the top of the image (crop), 
     50, 50, // "Get" a `50 * 50` (w * h) area from the source image (crop), 
     0, 0,  // Place the result at 0, 0 in the canvas, 
     50, 50); // With as width/height: 100 * 100 (scale) 
    var _img = document.getElementById('base64'); 
    _img.innerHTML += canvas.toDataURL(); 
} 

image.src = 'https://www.google.nl/images/srpr/logo3w.png';