使用colorpicker值在图像URL中打印颜色?

时间:2019-01-06 13:28:41

标签: javascript html color-picker

template <bool... Pred>
struct all_dummy;

template <bool... Preds>
using all = std::is_same<all_dummy<Preds...>, all_dummy<((void)Preds, true)...>>;

template <
    std::size_t N = sizeof...(T),
    std::enable_if_t<(N != 1 || !all<std::is_same<T, int>::value...>::value), bool> = true
>
bar(T... x) {store(data,x...);}

这是我的代码= http://jsfiddle.net/3ugfzL68/1/的测试模式

当我从颜色选择器中拾取颜色或更新输入中的字体或其他值时,JavaScript代码无法更新img src。我也想知道是否还有其他简单的方法可以实现这一目标。
我对javascript或编码不熟悉,请考虑将我的请求视为新手。对不起,我的英语水平不好。希望你理解我的观点。

1 个答案:

答案 0 :(得分:0)

看起来像在代码中错过了jQuery。 我已将jQuery作为第一个库添加,并且更改URL似乎可以正常工作。

更新的小提琴:http://jsfiddle.net/3ugfzL68/2/

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

我的建议是: 如果只想进行简单的DOM操作,则应使用本机js函数,而不要包括jQyery之类的库。现在不再需要使用jQuery了,没有它就可以轻松完成所有工作。

这也是使用jQuery的代码:

<script type="text/javascript">  

function update(){
    let src = 'https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width='+ document.getElementById('size2').value.replace('#','')+'&height=100&RenderText='+ document.getElementById('name').value.replace('#','')+'&TextSize='+ document.getElementById('size1').value.replace('#','')+'&TextColor=%23'+ document.getElementById('clr1').value.replace('#','')+'&BgColor=%23' + document.getElementById('clr2').value.replace('#','');        
    document.getElementById('1Img').setAttribute('src', src);
}
</script>

noJQuery提琴:http://jsfiddle.net/3ugfzL68/4/