php 图片裁剪多文件,thinkphp3.2+cropper实现多张图片的上传并剪切图片 （代码示例）...

本篇文章给大家带来的内容是介绍thinkphp3.2+cropper实现多张图片的上传并剪切图片 (代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来看看实现的效果截图：

点加号可以继续上传第二张图片

代码部分：

前端代码：

照片：

*请添加图片

×

剪裁图片

Crop

function onChangeFn (obj) {

var _this=$(obj),

_upload=_this.parent();

currentUpload=_upload;

//

//截取开始

var files = obj.files;

var done = function (url) {

image.src = url;

$modal.modal('show');

};

var reader;

var file;

var url;

if (files && files.length > 0) {

file = files[0];

if (URL) {

done(URL.createObjectURL(file));

} else if (FileReader) {

reader = new FileReader();

reader.onload = function (e) {

done(reader.result);

};

reader.readAsDataURL(file);

}

}

}

var image = document.getElementById('image');

var $modal = $('#modal');

var currentUpload;

var cropper;

$modal.on('shown.bs.modal', function () {

cropper = new Cropper(image, {

aspectRatio: 16/9,

zoomable:true,

zoomOnWheel:true,

viewMode: 0,

});

}).on('hidden.bs.modal', function () {

cropper.destroy();

cropper = null;

});

document.getElementById('crop').addEventListener('click', function () {

var canvas;

$modal.modal('hide');

if (cropper) {

canvas = cropper.getCroppedCanvas({

width: 800,

height: 500,

});

// avatar.src = canvas.toDataURL();

var reader = new FileReader();

reader.onload = function(evt) {

currentUpload.before('

');

}

canvas.toBlob(function (result) {reader.readAsDataURL(result);},"image/jpeg");

// console.log(canvas);

if (currentUpload.next().css('display')=='block') {

currentUpload.next().css('display','none')

}

var strHtml='

currentUpload.after(strHtml);

currentUpload.hide();

}

});

后台部分:

$base64_image_content = $_POST["picc"];

foreach($base64_image_content as $k=>$v){

$imageName = date("His",time())."_".rand(1111,9999).'.png';

$dir = date('Ymd');

$path = 'uploads/'.$dir;

if (!is_dir($path)){ //判断目录是否存在 不存在就创建

mkdir($path,0777,true);

}

if (strstr($v,",")){

$base64_image_contents = explode(',',$v);

$base64_image = $base64_image_contents[1];

$root = $_SERVER['DOCUMENT_ROOT']."/".$path."/". $imageName;

$r = file_put_contents($root, base64_decode($base64_image));//返回的是字节数

}

$image[] = '/'.$path.'/'. $imageName;

}

foreach ($image as $kk=>$vv) {

$images[] = json_encode($vv, true);

}

$data["image"] = '['.implode(',',$images).']';//将base64格式图片转换为文件形式

function dataURLtoBlob(dataurl) {

var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while(n--){

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], {type:mime});

}

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多相关视频教程，可访问：php教程！