大佬教程收集整理的这篇文章主要介绍了我应该如何使用jcrop在客户端裁剪图像并上传？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Seahorsepip的答案很棒。我对非后备答案做了很多改进。
我建议您不要做一个奇怪的隐藏png事情，当一个Image对象也可以工作的时候（只要我们不支持后备）。
var jcrop_API;
var canvas;
var context;
var image;
var prefsize;
即使是这样，您最好还是从画布上移出该数据，而仅在最后将其放入该字段中。
function loadImage(input) {
if (input.files && input.files[0]) {
var reader = new fileReader();
reader.onload = function(E) {
image = new Image();
image.src = e.target.result;
valIDateImage();
}
reader.readAsDataURL(input.files[0]);
}
}
但是，如果您想要的不仅仅是裁剪功能，我们还可以将jcrop附加到插入的画布上（在刷新时将使用jcrop销毁它）。我们可以轻松地完成我们可以使用画布执行的任何操作，然后再次执行valIDateImage（）并使更新的图像可见。
function valIDateImage() {
if (canvas != null) {
image = new Image();
image.src = canvas.toDataURL('image/png');
}
if (jcrop_API != null) {
jcrop_API.destroy();
}
$("#vIEws").empty();
$("#vIEws").append("<canvas ID=\"canvas\">");
canvas = $("#canvas")[0];
context = canvas.getContext("2d");
canvas.wIDth = image.wIDth;
canvas.height = image.height;
context.drawImage(image, 0, 0);
$("#canvas").Jcrop({
onSELEct: SELEctcanvas,
onRelease: clearcanvas,
BoxWIDth: crop_max_wIDth,
BoxHeight: crop_max_height
}, function() {
jcrop_API = this;
});
clearcanvas();
}
然后在提交时，我们提交任何未决的操作，例如applyCrop（）或applyScale（），如果需要的话，将数据添加到备用字段的隐藏字段中。然后我们有了一个系统，我们可以轻松地以任何方式修改画布，然后在提交画布时正确发送数据。
function applyCrop() {
canvas.wIDth = prefsize.w;
canvas.height = prefsize.h;
context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.wIDth, canvas.height);
valIDateImage();
}
画布被添加到div视图中。
<div ID="vIEws"></div>
为了捕获php（drupal）中的附件，我使用了类似的方法：
function makefileManaged() {
if (!isset($_fileS['croppedfile']))
return NulL;
$path = $_fileS['croppedfile']['tmp_name'];
if (!file_exists($path))
return NulL;
$result_filename = $_fileS['croppedfile']['name'];
$uri = file_unmanaged_move($path, 'private://' . $result_filename, file_EXISTS_REName);
if ($uri == falSE)
return NulL;
$file = file::Create([
'uri' => $uri,
]);
$file->save();
return $file->ID();
}
我正在开发一个具有文件上传HTML控件的组件，使用该控件选择图像后，该图像将呈现在HTML5 Canvas元素上
id = target 是jcrop图像目标
id = photograph 是文件上传控件
id =预览 是canvas元素
id = clear_SELEction 是一个可以清除画布的按钮
使用的第三方JS库：
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.Jcrop.js"></script>
<script src="./js/jquery.color.js"></script>
设置JCrop：
<script type="text/javascript">
jQuery(function($){
var api;
$('#target').Jcrop({
// start off with jcrop-light class
bgOpacity: 0.5,keySupport: false,bgColor: 'black',minSize:[240,320],maxSize:[480,640],onChange : updatePreview,onSELEct : updatePreview,height:160,width:120,addClass: 'jcrop-normal'
},function(){
api = this;
api.setSELEct([0,240,320]);
api.setOptions({ bgFade: true });
api.ui.SELEction.addClass('jcrop-SELEction');
});
});
清除画布按钮单击事件：
jQuery('#clear_SELEction').click(function(){
$('#target').Jcrop({
setSELEct: [0,0],});
});
在jcrop面板上显示上传的图像
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (E) {
$('#target').attr('src',e.target.result);
setProperties();
}
reader.readAsDataURL(input.files[0]);
}
}
function setProperties(){
$('#target').Jcrop({
setSELEct: [0,320]
});
}
$("#photograph").change(function(){
readURL(this);
});
我正在使用以下代码在画布上裁剪和渲染图像。
function make_base() {
console.log("make_base called");
var base_image = new Image();
base_image.src = '';
base_image.onload = function () {
context.drawImage(base_image,0);
}
}
var canvas = document.getElementById('preview'),context = canvas.getContext('2d');
make_base();
function updatePreview(C) {
console.log("called");
if(parseInt(c.w) > 0) {
// Show image preview
var imageObj = $("#target")[0];
var canvas = $("#preview")[0];
var context = canvas.getContext("2d");
context.drawImage(imageObj,c.x,c.y,c.w,c.h,canvas.width,canvas.height);
}
};
这是我在上述设置中面临的一系列问题：
以上是大佬教程为你收集整理的我应该如何使用jcrop在客户端裁剪图像并上传？全部内容，希望文章能够帮你解决我应该如何使用jcrop在客户端裁剪图像并上传？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。