欧洲美熟女乱又伦aa片,国产超碰无码最新上传剧情

技術頻道 - js技術

HTML5和JQuery裁剪圖像實時預覽縮略圖并上傳

作者:admin 時間:2019-8-27 14:44:19 瀏覽:

本文介紹如何使用HTML5和JQuery裁剪圖像實時預覽縮略圖并上傳，需要用到插件Jcrop。

HTML5和JQuery裁剪圖片

使用HTML5和JQuery裁剪圖片

調用JQuery庫文件

調用Jcrop js插件

該js文件需要下載到本地（文件包含在本文源碼壓縮包里），調用時要注意文件路徑。

調用css文件

css文件要下載到本地（文件包含在本文源碼壓縮包里），調用時要注意文件路徑。

html標記

HTML標記由HTML FileUpload、HTML Image、HTML按鈕、HTML5 Canvas 和一些隱藏字段組成。

JQuery實現代碼

在jquery document ready事件處理程序中，將更改事件處理程序分配給FileUpload控件，并將單擊事件處理程序分配給html按鈕。

當在HTML FileUpload控件中選擇文件時，將使用HTML FileReader API讀取文件，然后圖像顯示在image元素中，最后將Jcrop插件應用于image元素。

注：有關使用HTML5 FileReader API顯示圖像的更多詳細信息，請參閱我的文章“圖片上傳之前用 jQuery FileReader() 顯示預覽圖的實例”。

Jcrop插件在其onChange和onSelect事件處理程序上調用SetCoordinates函數，它允許我們將坐標和尺寸（即裁剪圖像的高度和寬度）保存到隱藏字段中。

$('#Image1').Jcrop({
onChange: SetCoordinates,
onSelect: SetCoordinates
});

單擊裁剪按鈕時，它首先創(chuàng)建HTML5 Canvas的實例，然后使用OnLoad事件處理程序將圖像加載到圖像對象中。

在OnLoad事件處理程序中，使用保存坐標和尺寸（即裁剪圖像的高度和寬度）在Canvas上重新繪制原始圖像。

最后，使用toDataURL方法從Canvas中提取剪切圖像的base64字符串，并保存在imgCropped hidden字段中，該字段稍后可發(fā)送到服務器以保存圖像。

完整HTML代碼

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>
<body>

<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>
<img id="Image1" src="" alt="" style="display: none" />
</td>
<td>
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" id="btnCrop" value="裁剪圖片" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
<br />
<hr />

<script type="text/javascript">
$(function () {
$('#FileUpload1').change(function () {
    $('#Image1').hide();
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#Image1').show();
      $('#Image1').attr("src", e.target.result);
      $('#Image1').Jcrop({
        onChange: SetCoordinates,
        onSelect: SetCoordinates
      });
    }
    reader.readAsDataURL($(this)[0].files[0]);
});

$('#btnCrop').click(function () {
    var x1 = $('#imgX1').val();
    var y1 = $('#imgY1').val();
    var width = $('#imgWidth').val();
    var height = $('#imgHeight').val();
    var canvas = $("#canvas")[0];
    var context = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {
      canvas.height = height;
      canvas.width = width;
      context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
      $('#imgCropped').val(canvas.toDataURL());
    };
    img.src = $('#Image1').attr("src");
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
};
</script>

</body>
</html>

效果如圖：

HTML5和JQuery裁剪圖片

execcode getcode

上傳裁剪圖片到服務器

由于裁剪圖片以base64字符串形式存儲在imgCropped字段中，所以上傳圖片其實是在服務器端接收該字段的字符串即可，然后可在服務器端把該base64字符串轉換為圖片保存起來。這里不再提供服務器端處理程序，大家根據自己編程的語言，例如php，可直接百度“php把base64字符串轉換為圖片保存”。