Javascript截图相关参考项目

来源：互联网发布：铁在烧纪录片知乎编辑：程序博客网时间：2024/06/01 08:48

Jcrop

项目地址：http://jcrop.org/doc/quickstart https://github.com/tapmodo/Jcrop/

canvas2image

项目地址：https://github.com/hongru/canvas2image

html2canvas

项目地址：https://github.com/niklasvh/html2canvas/releases

Jcrop 使用方法

在页面中导入JQuery.js及JQuery.Jcrop.js

Jcorp的调用主要分为两种方式

      1、jQuery('#cropbox').Jcrop({
                onChange: showCoords,
                onSelect: showCoords
           });

      2、var api = $.Jcrop('#cropbox',{
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
           });

这里推荐大家使用第二种方式，将Jcrop生成的对象赋给一个全局变量，这样操作起来更灵活，如调用api.destroy();方法可以销毁Jcorp，这样我们在实际使用中会更灵活一些，因为直接改变要裁剪图片的路径会导致Jcorp的出错，如果想要变更编辑的图片我们需要销毁Jcorp，变更图片的属性后再次为图片附加Jcorp。

1.最基本使用方法

$(
function()
{
$("#demoImage").Jcrop();
}
);

2.得到选中区域的坐标以及回调函数

$(function(){
//事件处理
$("#demoImage").Jcrop({
onChange:showCoords, //当选择区域变化的时候，执行对应的回调函数
onSelect:showCoords //当选中区域的时候，执行对应的回调函数
});
});
function showCoords(c) {
$("#txtX1").val(c.x); //得到选中区域左上角横坐标
$("#txtY1").val(c.y); //得到选中区域左上角纵坐标
$("#txtX2").val(c.x2); //得到选中区域右下角横坐标
$("#txtY2").val(c.y2); //得到选中区域右下角纵坐标
$("#txtWidth").val(c.w); //得到选中区域的宽度
$("#txtHeight").val(c.h); //得到选中区域的高度
}

3.常用选项设置

aspectRatio:选中区域按宽/高比，为1表示正方形。 
minSize:最小的宽，高值。 
maxSize:最大的宽，高值。 
setSelect:设置初始选中区域。 
bgColor:背景颜色 
bgOpacity:背景透明度。 
allowResize:是否允许改变选中区域大小。 
allowMove:是否允许移动选中区域。

举例如下：

复制代码代码如下:

$(function() { 
$("#demoImage").Jcrop({ 
aspectRatio: 1, //选中区域宽高比为1，即选中区域为正方形 
bgColor:"#ccc", //裁剪时背景颜色设为灰色 
bgOpacity:0.1, //透明度设为0.1 
allowResize:false, //不允许改变选中区域的大小 
setSelect:[0,0,100,100] //初始化选中区域 
}); 
});

4.api用法

复制代码代码如下:

var api = $.Jcrop("#demoImage"); 
api.disable(); //设置为禁用裁剪效果 
api.enable(); //设置为启用裁剪效果 
api.setOptions({allowResize:false});//设置相应配置 
api.setSelect([0,0,100,100]); //设置选中区域 

=======================================================================================================

方法如下：

一、在head部分(<head>和</head>之间)插入相关css和js文件。

<link rel="stylesheet"href="css/jquery.Jcrop.css"><script src="js/jquery.js"></script><script src="js/jquery.Jcrop.js"></script>

二、在head部分插入回调函数等相关处理参数。

<script language="Javascript"><!--jQuery(function($) {    // Create variables (in this scope) to hold the API and image size    var jcrop_api, boundx, boundy;    $('#cropbox').Jcrop({            minSize: [0, 0],            maxSize: [0, 0],            setSelect: [0, 0, 0, 0],            boxWidth: 800,            borderOpacity: 0.3,            keySupport: false,            dragEdges: false,            allowSelect: false,            allowResize: false,            bgOpacity: 0.2,            boundary: 0,            //allowMove:false,            addClass: 'jcrop-handle',            onSelect: updateCoords,        },        function() {            // Use the API to get the real image size            var bounds = this.getBounds();            boundx = bounds[0];            boundy = bounds[1];            // Store the API in the jcrop_api variable            jcrop_api = this;        });    function updateCoords(c) {        $('#x').val(c.x);        $('#y').val(c.y);        $('#w').val(c.w);        $('#h').val(c.h);    };    function checkCoords() {        if (parseInt($('#w').val())) returntrue;        alert('请选择裁剪区域');        returnfalse;    };});--></script>

三、给相关图片加上id以便识别。

<img id="cropbox"src="x.jpg">

这样就能实现最简单的裁剪效果，至于如何结合动态语句处理图片，在置顶的文章里已经给出了示例。

下表给出基本options参数设置：

名称默认值说明allowSelecttrue允许新选框allowMovetrue允许选框移动allowResizetrue允许选框缩放trackDocumenttrue baseClass"jcrop"基础样式名前缀。说明：class="jcrop-holder"，更改的只是其中的 jcrop。addClassnull添加样式会。例：假设值为 "test"，那么会添加样式到 class="test jcrop-holder"bgColor"black"背景颜色。颜色关键字、HEX、RGB 均可。bgOpacity0.6背景透明度bgFadefalse使用背景过渡效果borderOpacity0.4选框边框透明度handleOpacity0.5缩放按钮透明度handleSize9缩放按钮大小handleOffset5缩放按钮与边框的距离aspectRatio0选框宽高比。说明：width/heightkeySupporttrue支持键盘控制。按键列表：上下左右（移动）、Esc（取消）、Tab（跳出裁剪框，到下一个）cornerHandlestrue允许边角缩放sideHandlestrue允许四边缩放drawBorderstrue绘制边框dragEdgestrue允许拖动边框fixedSupporttrue touchSupportnull boxWidth0画布宽度boxHeight0画布高度boundary2边界。说明：可以从边界开始拖动鼠标选择裁剪区域fadeTime400过度效果的时间animationDelay20动画延迟swingSpeed3过渡速度minSelect[0,0]选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择maxSize[0,0]选框最大尺寸minSize[0,0]选框最小尺寸onChangefunction(){}选框改变时的事件onSelectfunction(){}选框选定时的事件onReleasefunction(){}取消选框时的事件

下表是api方法

名称说明setImage(string)设定（或改变）图像。例：jcrop_api.setImage("newpic.jpg")setOptions(object)设定（或改变）参数，格式与初始化设置参数一样setSelect(array)创建选框，参数格式为：[x,y,x2,y2]animateTo(array)用动画效果创建选框，参数格式为：[x,y,x2,y2]release()取消选框disable()禁用 Jcrop。说明：已有选框不会被清除。enable()启用 Jcropdestroy()移除 JcroptellSelect()获取选框的值（实际尺寸）。例子：console.log(jcrop_api.tellSelect())tellScaled()获取选框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled())getBounds()获取图片实际尺寸，格式为：[w,h]getWidgetSize()获取图片显示尺寸，格式为：[w,h]getScaleFactor()获取图片缩放的比例，格式为：[w,h]

0 0