캔버스가 모바일 장치에서 작동하지 않는 이미지로 저장

나는 여러 캔버스를 결합한 코드를 하나의 이미지 파일에 저장합니다. 이 기능은 모바일이 아닌 장치에서 작동하지만 모바일 장치에서 테스트 한 결과 이미지가 생성되는 동안 파일을 열면 "_ 이미지에 오류가 있기 때문에 표시 할 수 없습니다"라는 메시지가 표시됩니다. 여기 캔버스가 모바일 장치에서 작동하지 않는 이미지로 저장

이미지로 변환하는 코드입니다 :

<script type='text/javascript'> 
window.addEventListener('load', function() { 
    'use strict'; 
    var src = document.getElementById('src'); 
    var dst = document.getElementById('dst'); 
    var dst1 = document.getElementById('dst1'); 
    var input = src.getContext('2d'); 
    var output = dst.getContext('2d'); 
    var output1 = dst1.getContext('2d'); 

    dst.width = dst_w; 
    dst.height = dst_h; 
    dst1.width = dst1_w; 
    dst1.height = dst1_h; 

    var img=document.getElementById("scream"); 
    input.drawImage(img,0,0); 

    var sprkl = document.getElementById('sprkl'); 
    var output_s = sprkl.getContext('2d'); 
    input.drawImage(document.getElementById('sparkle'),0,0,150,150); 

    input.drawImage(document.getElementById('circle'),0,0,<?php echo $lenssize.",".$lenssize.",".$left.",".$top.",".$dia.",".$dia; ?>); 
    input.drawImage(document.getElementById('circle1'),0,0,<?php echo $lenssize.",".$lenssize.",".$left1.",".$top1.",".$dia1.",".$dia1; ?>); 

    function gonext() { 
    var a = document.getElementById('src'); 
    var dataURL = a.toDataURL(); 
    $.post("save.php?filen=<?php echo $filen; ?>", {data: a.toDataURL("image/png")}) 
    window.setTimeout(function() { 
      document.frmnext.submit(); 
    }, 10000); 
} 

<div style="position: relative; z-index: 2"> 
      <canvas id="src" width="<?php echo $width; ?>" height="<?php echo $height; ?>"></canvas> 
      <canvas id="sprkl" style="position: absolute; z-index: 3;"></canvas> 
      <canvas id="dst" style='position: absolute; z-index: 3'></canvas> 
      <canvas id="dst1" style='position: absolute; z-index: 3'></canvas> 
</div>

출처

2013-10-02 zakuwolf

모바일 브라우저가'toDataURL'에 캔버스를 지원합니까? if (output_s)에 대한 검사가 표시되지 않습니다. 서버에 저장하지 않는 한 데이터를'Blob'에 저장하면 왕복을 막을 수 있습니다. –

정말하지만 내가 찾은 해결책은 내가 단순히 JS 파일을 추가 here

입니다, 내 문제에 회신에 시간을 주셔서 감사합니다 그리고 그 것이었다.

다시 한번 감사드립니다.

출처

2013-10-03 06:24:05 zakuwolf

내가 생각하기 때문에 toDataURL이 시도 지원하기 위해, 나는 같은했다 base64로 같은 데이터를 문자열로 수출 이미지에 문제가 ...

이있다 내 프로젝트에 문제가, 그리고 난 내가 모바일 장치의 많은 실행할 수

$('.jSignature').attr('id','image_b_id'); 
var canvas_1 = document.getElementById('image_b_id'); 
var image_b_base64 = canvas_1.toDataURL();

내가 jSignature Canvas을 만들 this solution을 발견했다. 그러나 갤럭시 미니와 같은 일부 다른 장치 오류가 ...이

출처

2013-10-02 21:10:18

캔버스가 모바일 장치에서 작동하지 않는 이미지로 저장

답변

관련 문제