何らかの理由で、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');
});