Question

我有一个组合多个画布的代码，并将它们保存到一个图像文件中。虽然这适用于非移动设备，但我在移动设备上进行了测试，并且在生成图像时，打开文件会给您一条消息，指出“图像 _ 无法显示，因为它包含错误。“

以下是转换为图片的代码：

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

Answer 1

要支持toDataURL试试这个，因为我认为导出图片存在问题，数据字符串如base64 ......

我的项目遇到了同样的问题，我找到了this solution

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

当我创建jSignature Canvas时，我可以在许多移动设备上运行。但是其他一些设备出现了错误，例如Galaxy mini ......

Answer 2

我非常感谢您回复我的问题，但我找到的解决方案是here

我只是添加了js文件，就是这样。

再次感谢：）

画布保存为图像无法在移动设备上运行

2 个答案: