Question

出于某种原因，当我通过jquery传递base64 url时，它正在更改
的值 canvas.toDataURL（）;

window.open(canvas.toDataURL());

将正确生成

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAzCAYAAACuR5nYAAAATklEQVRIS2P8DwQMRADGoaDw6dOnxHlmy5YtxClsbm4mTmFgYCBxChUUFIhTCIyUUYU4UybjaPDgy7WjwYO3TBsNntHgwQiB0USBN1EAAJ80SZkuW4e0AAAAAElFTkSuQmCC

然而

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

会将其更改为

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAzCAYAAACuR5nYAAAALElEQVRIS2NkIBIwEqmOYVQh3pAaDZ7R4MEIgdFEMZooRhMFOARGs8JgzQoA3IkANLlv8A4AAAAASUVORK5CYII=

这显然破坏了网址，为什么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');
});

Answer 1

试试这个：

var url = canvas.toDataURL("image/png");

jQuery在将其存储为变量时更改base64 URL？

1 个答案: