canvas实现简单方便抠图工具

canvas实现简单方便抠图工具

基于canvas的简单图片编辑工具,包括 抠图,裁剪,调色,导出多种格式(全备注,无聊编写,有兴趣的可以研究一下,其实还是有点使用的)

使用方法

  • 双击进入抠图选区
  • 支持裁剪,简单调色,按住空格,鼠标可以拖到画布。
  • 可导出多种格式,简单方便。
  • 未做兼容处理。谷歌ok。

需要用到的JS代码

1
2
<script src="ps/ui.js"></script>
<script src="ps/ps.js"></script>

THML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="color windows">
    <h4>&nbsp;颜色调节<span>x</span></h4>
    <div class="contr_color">
        <h5>R: <input id="color_r" type="range" value="0" min="-255" max="255"></h5>
        <h5>G: <input id="color_g" type="range" value="0" min="-255" max="255"></h5>
        <h5>B: <input id="color_b" type="range" value="0" min="-255" max="255"></h5>
        <h5>A: <input id="color_a" type="range" value="0" min="-255" max="255"></h5>
    </div>
    <div class="submit color_btn">
        <a href="javacsript:;">取 消</a>
        <a href="javacsript:;">确 定</a>
    </div>
</div>

保存窗口

1
2
3
4
5
6
7
8
9
10
11
12
<div class="save windows">
    <h4>&nbsp;选择保存类型<span>x</span></h4>
    <div class="contr_save">
        <h5 class="contr_save_type">类型: <span title="常用格式,可压缩">JPEG<input name="image" type="radio" checked="checked"></span>
            <span title="带透明通道">PNG<input name="image" type="radio" checked="checked"></span><span title="window常用图片">BMP<input name="image" type="radio"></span></h5>
        <h5 class="contr_save_gre">质量: <input title="0.8" type="range" value="8" min="1" max="10" onchange="this.title=this.value/10"></h5>
    </div>
    <div class="submit save_btn">
        <a href="javacsript:;">取 消</a>
        <a href="javacsript:;">确 定</a>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论