thinkphp3.2+cropper implémente le téléchargement et la découpe de plusieurs images (exemple de code)

Le contenu de cet article est de présenter thinkphp3.2+cropper pour réaliser le téléchargement et le découpage de plusieurs images (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. les gars ont aidé.

Tout d'abord, jetons un coup d'œil à la capture d'écran de l'effet obtenu :

Cliquez sur le signe plus pour continuer à télécharger la deuxième photo

Partie code :

Code front-end :

<link>
    <link>
    <link>
    <link>

    <script></script>
    <script></script>
    <script></script>
    <script></script>
    <script></script>
    <div>
            <label>照片：</label>
            <div>
                    <div> 
                            <input>
                     </div>
               <div>*请添加图片</div>
            </div>
     </div>
    
     <div>
    <div>
        <div>
            <button>×</button>
            <div>
                <h5>剪裁图片</h5>
            </div>
            <div>
                <div>
                    <img  class="upload-img lazy" src="/static/imghwm/default1.png" data-src="images/erweima.png" alt="thinkphp3.2+cropper implémente le téléchargement et la découpe de plusieurs images (exemple de code)" >
                </div>
            </div>
            <div>
                <button>Crop</button>
            </div>
        </div>
    </div>
</div>   

    function onChangeFn (obj) {
        var _this=$(obj),
            _upload=_this.parent();
        currentUpload=_upload;
        // <img  class="upload-img lazy" src="/static/imghwm/default1.png" data-src="images/erweima.png" alt="thinkphp3.2+cropper implémente le téléchargement et la découpe de plusieurs images (exemple de code)" >
        //截取开始
        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('<div>
<img  class="upload-img lazy" src="/static/imghwm/default1.png" data-src="' + evt.target.result + '" alt="thinkphp3.2+cropper implémente le téléchargement et la découpe de plusieurs images (exemple de code)" ><input><button></button>
</div>');
            }
            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='<div><input></div>';
            currentUpload.after(strHtml);
            currentUpload.hide();
        }
    });

Partie backend :

            $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});
    }

Résumé : Ce qui précède est le résumé de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels vidéo connexes, veuillez visiter : tutoriel php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!