html_图片签批

 

 

本篇博文记录图片的批注等功能，主要讲解怎么使用

直接看效果

 

 主要文件说明

imageview.css：工具栏样式文件。

imageview.js：canvas核心文件。

h-imagevert.js：工具栏事件、处理文件。

一、确保页面具备工具栏元素

这里只是部分元素截图，完整的请看源码。

二、加载图片

preview是博主自己写的初始化方法（在h-imagevert.js文件里面），第一个参数是图片数组；第二个参数是按钮【下一步】的回调函数。

 

html可能会出现编码不一致情况，如果没有解决请复制下方代码替换页面中的工具条元素

<div id="preview" class="preview" style="display: none;">
        <canvas id="c" style="height:100%;width:100%">
            抱歉，你的浏览器不支持 Canvas Canvas
        </canvas>
        <!-- <button id="show">Show the canvas</button> -->
        <div id="hide"></div>
        <div id="prev" data-enable="N"></div>
        <div id="next" data-enable="N"></div>
        <ul class="tool-bar">
            <li id="zoom-in">放大</li>
            <li id="zoom-out">缩小</li>
            <li id="reset">原始尺寸</li>
            <li id="rotate">旋转</li>
            <li id="pen">画笔</li>
            <li id="text">文字</li>
            <li id="download"><a id="download-a" href="javascript:void(0);">暂存</a></li>
            <li id="publish" data-disabled="false">下一步</li>
        </ul>
 
        <div id="pen-box" class="pen-box" data-show="N" style="display: none;">
            <span class="title">颜色：</span>
            <ul>
                <li class="col i1 col-sel" data-value="#f00"></li>
                <li class="col i2" data-value="#0f0"></li>
                <li class="col i3" data-value="#ff3"></li>
                <li class="col i4" data-value="#0cf"></li>
                <li class="col i5" data-value="#7e00ff"></li>
                <li class="col i6" data-value="#ff9000"></li>
                <li class="col i7" data-value="#000"></li>
                <li class="col i8" data-value="#fff"></li>
            </ul>
            <span class="title">粗细：</span>
            <ul class="thickness">
                <li class="pen-line line-sel" data-value="2"><span></span></li>
                <li class="pen-line" data-value="6"><span></span></li>
                <li class="pen-line" data-value="12"><span></span></li>
            </ul>
            <a href="javascript:;" id="undo" class="undo" data-enable="N">撤销</a>
            <div class="triangle"></div>
        </div> 
        <div id="font-box" class="font-box" data-show="N" style="display: none;">
            <span class="title">颜色：</span>
            <ul>
                <li class="col i1 col-sel" data-value="#f00"></li>
                <li class="col i2" data-value="#0f0"></li>
                <li class="col i3" data-value="#ff3"></li>
                <li class="col i4" data-value="#0cf"></li>
                <li class="col i5" data-value="#7e00ff"></li>
                <li class="col i6" data-value="#ff9000"></li>
                <li class="col i7" data-value="#000"></li>
                <li class="col i8" data-value="#fff"></li>
            </ul>
            <span class="title">字号：</span>
            <ul>
                <li class="font-size font-sel" data-value="14">小</li>
                <li class="font-size" data-value="30">中</li>
                <li class="font-size" data-value="60">大</li>
            </ul>
            <div class="triangle"></div>
        </div>
        <canvas id="c1" width="1000" height="1000" style="width: 1000px; height: 1000px; background-color: gray;display:none;"></canvas>
    </div>

 

下载地址：下载

注意：源码可根据自己的需求随意更改。

如果有优化或者有bug的地方，欢迎大家留言。