0

何らかの理由で、base64 URLをjqueryに渡すと、
canvas.toDataURL();の値が変更されます。

window.open(canvas.toDataURL());

正しく生成されます

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAzCAYAAACuR5nYAAAATklEQVRIS2P8DwQMRADGoaDw6dOnxHlmy5YtxClsbm4mTmFgYCBxChUUFIhTCIyUUYU4UybjaPDgy7WjwYO3TBsNntHgwQiB0USBN1EAAJ80SZkuW4e0AAAAAElFTkSuQmCC

でも

var url = canvas.toDataURL();
window.open(url);

に変更されます

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAzCAYAAACuR5nYAAAALElEQVRIS2NkIBIwEqmOYVQh3pAaDZ7R4MEIgdFEMZooRhMFOARGs8JgzQoA3IkANLlv8A4AAAAASUVORK5CYII=

これは明らかにURLを破壊します、なぜjQueryが私のURLを台無しにするのですか、それらの回避策はありますか?

助けてくれてありがとう。

<canvas id="colors" height="50" width="10"></canvas>
<div class="colors">
<input type="text" class="url" value="0" />
    <div class="inputs">
        <input type="text" class="pos" value="0" />
        <input type="text" class="color" value="#ffffff" />
    </div>
    <div class="inputs">
        <input type="text" class="pos" value="1" />
        <input type="text" class="color" value="#000000" />
    </div>
</div>

$('.colors').each(function(){
    $(this).on('colors', function(){
        var canvas = document.getElementById('colors');
        var ctx = canvas.getContext('2d');
        var lingrad = ctx.createLinearGradient(0,0,0,50);

        $('.inputs').each(function(){
             var pos = $(this).find('.pos').val();
             var color = $(this).find('.color').val();
                 lingrad.addColorStop(pos, color);
        });

        ctx.fillStyle = lingrad;
        ctx.fillRect(0,0,10,50);

        var url = canvas.toDataURL();
        $(this).find('.url').val(url);
        alert(url);
    window.open(url);
    });
});

$('input').on('change', function(){
    $(this).trigger('colors');
});
4

1 に答える 1

0

これを試して:

var url = canvas.toDataURL("image/png");
于 2013-02-07T13:25:14.677 に答える