base64图片上传,推到又拍云

Html部分

<label>
    <img id="nvhai" src="{$agent.id|get_headimg}" height="70px" width="70">
    <input style="display:none" id="tou" type="file" onchange="previewFile()">
</label>

Js部分

    //单文件上传
    function previewFile(){
        var file=document.getElementById(‘tou‘).files[0];
        var reader=new FileReader();
        reader.addEventListener(‘load‘,function(){
            $.ajax({
                type:‘post‘,
                url:‘http://api.xxx.cn/api/up‘,
                datatype:‘josn‘,
                data:{img:reader.result},
                success:function(response){
                    document.getElementById(‘nvhai‘).setAttribute(‘src‘,‘http://img.xxx.cn/‘+response);
                }
            });
            document.getElementById(‘nvhai‘).setAttribute(‘src‘,reader.result);
        },false);
        reader.readAsDataURL(file);
    }
    function MorepreviewFile(){
        var file=document.getElementById(‘moretou‘).files;
        if(file.length>8){
            $(‘.mo‘).html(‘选择的图片不能超过8张,请重新选择‘);
            $(‘.mo‘).fadeIn(‘fast‘);
            setTimeout(function(){
                $(‘.mo‘).fadeOut(‘fast‘);
            },1500)
        }else{
            for(var i=0;i<file.length;i++){
                var reader=new FileReader();
                reader.readAsDataURL(file[i]);
                reader.onload=function(e){
                    $(‘.jia‘).before("<li class=‘img-box‘><img src=‘"+this.result+"‘ width=‘100%‘ height=‘80px‘></li>");
                }
            }
        }
    }

Php部分

    /**
     * 上传图片并且又拍云 2017/3/3
     * @param:img resource图片的base64代码,包含头文件
     * @Return: array 是否上传成功呢
     * @Author: xiaohu [email protected]
     */
    public function up()
    {
       $pic = I(‘img‘);
       //解码上传
       $pic_url =  pic_decode_base64($pic,‘./upload/‘);
       //推到又拍云
       $qrcode = substr($pic_url, 1);
       $upun = upimg($qrcode);

       $this->ajaxreturn($upun);
    }

函数库

//=============================================图片上传中心=base64/又拍云================================================

    /**TODO 上传图片base64
     * 上传的base64图片进行转换并上传
     * @param  resource 图片的base64代码,包含头文件
     * @param  string 上传的路径
     * @return 图片地址
     * @author 小虎 [email protected]
     */
    function pic_decode_base64($file,$path=‘./upload/‘)
    {
        // 获取图片
        list($type, $data) = explode(‘,‘, $file);
        // 判断图片类型
        if(strstr($type,‘image/jpeg‘)!=‘‘){
            $ext = ‘.jpg‘;
        }elseif(strstr($type,‘image/gif‘)!=‘‘){
            $ext = ‘.gif‘;
        }elseif(strstr($type,‘image/png‘)!=‘‘){
            $ext = ‘.png‘;
        }
        // 生成的文件名
        $photo = $path.uniqid().$ext;
        // 生成文件
        $Temp = base64_decode($data);
        $temp = gzinflate($Temp);

        file_put_contents($photo, $Temp, true);

        return $photo;
    }

    /**TODO 上传图片到又拍云
     * 上传图片到又拍云
     * @param  string $img
     * @return string
     */
    function upimg($img)
    {
        set_time_limit(0);
        ini_set(‘memory_limit‘, ‘512M‘);
        $process = curl_init(‘http://v0.api.upyun.com/XXX/upload/‘ .date(‘Ymd‘). $img);
        // 上传操作
        curl_setopt($process, CURLOPT_PUT, 1);
        curl_setopt($process, CURLOPT_USERPWD, "XXX");
        curl_setopt($process, CURLOPT_HEADER, 0);
        curl_setopt($process, CURLOPT_TIMEOUT, 60);
        // 本地待上传的图片文件
        $local_file_path = ‘.‘ . $img;
        $datas = fopen($local_file_path, ‘r‘);
        fseek($datas, 0, SEEK_END);
        $file_length = ftell($datas);
        fseek($datas, 0);

        // 设置待上传图片的内容
        curl_setopt($process, CURLOPT_INFILE, $datas);

        // 设置待上传图片的长度
        curl_setopt($process, CURLOPT_INFILESIZE, $file_length);

        curl_setopt($process, CURLOPT_HTTPHEADER, array(
            //‘x-gmkerl-type: fix_width‘,
            // ‘x-gmkerl-value: 200‘,
            ‘x-gmkerl-unsharp: true‘,
            ‘Mkdir:true‘,
        ));
        curl_exec($process);
        //  $info=curl_getinfo($process);
        curl_close($process);
        fclose($datas);
        //删除图片
        @unlink (‘./‘.$img);
        return $img = ‘/upload/‘ .date(‘Ymd‘).$img;
    }

//=============================================END=====================================================================
时间: 2024-12-04 11:26:01

base64图片上传,推到又拍云的相关文章

base64图片上传

图片上传 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet

base64图片上传处理方式

前台传图片的base64格式,后台处理方式//处理图片信息 返回对应的路径public function uploadBaseIma($imgArr){ $result = array(); //将路径直接设置在uploads下 if($imgArr){ foreach($imgArr as $k => $v){ if($v){ //判断上传的是否为原地址 $a = preg_match('/.*(\.png|\.jpg|\.jpeg|\.gif)$/', $v); if($a){ //是就存储

laravel结合七牛实现base64的图片上传

确保传到后台的是纯base64字符串而不是以data开头的 //base64图片上传 public function uploadCompressImg(Request $request) { $base64 = preg_replace("/\s/",'+',$request->input('img')); $img = base64_decode($base64); $disk = \Storage::disk('qiniu'); //使用七牛云上传 $img_name =

使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不够. 下面我们就说说,利用canvas 生成带水印的图片. 1.我们要实现一下效果 2.创建一个canvas var canvas = document.createElement('canvas'); var time = new Date(); var logoCanvas =time+' '+

ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/1237/csharp UpoladService示例代码: public class UpoladService : IUpoladService {     private readonly static string[] _imageExtensions = new string[] { ".jpg", ".png", ".gif&quo

MVC微信浏览器图片上传(img转Base64)

因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器 话不多说, 贴代码 先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片上传--> <section class="logo-license"> <div class="half"> <div class="uploader"> <a class="license

js实现图片上传预览功能,使用base64编码来实现

实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般会选择存图片路径的方式,这样有助于减小数据库压力,base64 编码后的图片信息是一个很长的字符串,一般我们使用longText类型来将其存入数据库. html代码如下: <div class="col-sm-6"> <img id="headPortraitI

小程序 图片转base64然后上传的坑点

图片上传要用到upng.js const self = this const ctx = wx.createCanvasContext('myCanvas') const platform = wx.getSystemInfoSync().platform const imgWidth = 60, imgHeight = 60; wx.chooseImage({ success: res => { //生成的图片临时路径画成canvas ctx.drawImage(res.tempFilePat

.Net Core 图片上传FormData和Base64

缓冲和流式传输是上传文件的两种常用方案,这里主要演示流式传输. 1.Net Core MVC Form提交方式: 前端页面 form表单提交: 1 <form id="uploadForm"> 2 图片上传: <input type="file" name="file" multiple value="选择" onchange="doUpload()" id="ajaxfile&