キャンバスの絵のカットを使用します

<！DOCTYPE HTML>
<HTMLのxmlns = "http://www.w3.org/1999/xhtml">
<HEAD>
<META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF- 8" />
<タイトル> </ TITLE>
<スクリプトSRC = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</ SCRIPT>

<スタイルタイプ= "テキスト/ cssの">
* {
パディング：0PX。
マージン：0PX。
}

.main {
位置：相対。
高さ：500pxなど。
幅：500pxなど。
国境：1pxの灰色の固体。
オーバーフロー：隠されました;
}

#btnfile {
}

.image {
位置：絶対。
高さ：500pxなど。
幅：500pxなど。
Zインデックス：1。
}

.cut_container {
位置：絶対。
国境：1pxのオレンジ色の固体;
高さ：150ピクセル;
幅：150ピクセル;
左：175px;
トップ：175px;
Zインデックス：8888;
}

.btn_container {
位置：絶対。
トップ：500pxなど。
}
</スタイル>
</ head>
<body>
<キャンバスID = "mycan"幅= "200"高さ= "200"スタイル= "表示：なし"> </キャンバス>
<DIV CLASS = "メイン" ID = "img_container">
<DIV CLASS = "cut_container" ID = "cut_container"ドラッグ可能= "偽"> </ div>

</ DIV>
<DIV CLASS = "btn_container">
<INPUT TYPE = "FILE" ID = "をbtnFile" />
<ボタンID = "btn_cut"のonclick = "cut_picture（）">确定</ボタン>
</ div>

</ BODY>
</ HTML>
<スクリプトタイプ= "テキスト/ javascriptの">
するvar IMG =のdocument.getElementById（ "myImg"）。
VAR幅=のparseInt（img.width）。
VaRの高さ=のparseInt（img.height）。
VAR X = 0。VAR Y = 0。
VARカット= $（のdocument.getElementById（ "cut_container"））
$（ "＃1をbtnFile"）に変更（関数（）{
VAR FR =新規FileReader（）;
varファイル= this.files [0];
fr.readAsDataURL（ファイル）;
fr.onload =関数（）{
にconsole.log（fr.result）;
img.src = fr.result;
幅= img.width;
高さ= img.height;
}

}）
VAR X = 0、Y = 0。
VARキャンバス=のdocument.getElementById（ "mycan"）;
VaRのCTX = canvas.getContext（ "2D"）。
img.onload =関数（）{
ctx.drawImage（IMG、0、0、幅、高さ）。
}

document.getElementById（ "img_container"）。onmousewheel =関数（E）{
E =イベント|| E;
VaRのV = e.wheelDelta。
（V> 0）であれば{
幅+ = 10。
高さ+ = 10。
$（IMG）の.css（{高さ：高さ、幅：幅}）
}
他{
幅- = 10。
高- = 10。
IF（幅<150 ||高さ<150）{
幅= 150。
高さ= 150。
}
$（IMG）の.css（{高さ：高さ、幅：幅}）

}
}

$（ "＃myImg"）マウスダウン（関数（E）{
E =イベント|| E;
VAR W = e.offsetX * 1;
VARのH = e.offsetY * 1;

$（ "＃1 img_container"）結合（。、関数（EX） "をMOUSEMOVE" {
EX =イベント|| EX;
VAR左= ex.clientX * 1;
VARトップ= ex.clientY * 1;
VARのL =左- W;
VARのT =トップ- H + $（文書）.scrollTop（）* 1。

$（ "＃1 myImg"）、CSS（{左：L、トップ：T}）
}）
}）
$（ "＃1 img_container"）のmouseUp（関数（）{
$（ "＃1 img_container"）がアンバインド（ "のMouseMove。「）
}）
関数cut_picture（）{
canvas.height = 150。
canvas.width = 150。
X =のparseInt（img.style.left） -のparseInt（cut.css（ "左"））。
Y =のparseInt（img.style.top） -のparseInt（cut.css（ "上部"））。
ctx.drawImage（IMG、X、Y、幅、高さ）。
console.log（canvas.toDataURL（））
window.open（canvas.toDataURL（））
}

</ SCRIPT>

ます。https：//www.cnblogs.com/-maomao/p/5276444.htmlで再現

キャンバスの絵のカットを使用します

おすすめ