PHP实现本地图片转base64格式并上传

我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import("@.ORG.UploadFile");的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。

主要是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦

可以大概的讲一下思路,其实也挺简单。选择了图片之后,js会先把已选的图片转化为base64格式,然后通过ajax上传到服务器端,服务器端再转化为图片,进行储存的一个过程。

咱们先看看前端的代码。

html部分

<input type="file" id="imagesfile">

js部分

$("#imagesfile").change(function (){

   var file = this.files[0];

   //用size属性判断文件大小不能超过5M ,前端直接判断的好处,免去服务器的压力。
   if( file.size > 5*1024*1024 ){
        alert( "你上传的文件太大了!" )
   }

   //好东西来了
   var reader=new FileReader();
    reader.onload = function(){

      // 通过 reader.result 来访问生成的 base64 DataURL
      var base64 = reader.result;

      //打印到控制台,按F12查看
      console.log(base64);

      //上传图片
      base64_uploading(base64);

    }
     reader.readAsDataURL(file);

});

//AJAX上传base64
function base64_uploading(base64Data){
  $.ajax({
     type: 'POST',
     url: "上传接口路径",
     data: {
      'base64': base64Data
     },
     dataType: 'json',
     timeout: 50000,
     success: function(data){

        console.log(data);

     },
     complete:function() {},
     error: function(xhr, type){
         alert('上传超时啦,再试试');

     }
   });
}

其实前端的代码也并不复杂,主要是使用了new FileReader();的接口来转化图片,new FileReader();还有其他的接口,想了解更多的接口使用的童鞋,自行谷歌搜索new FileReader();。

接下来,那就是服务器端的代码了,上面的demo,是用thinkphp为框架编写的,但其他框架也基本通用的。

  function base64imgsave($img){

    //文件夹日期
    $ymd = date("Ymd");

     //图片路径地址
    $basedir = 'upload/base64/'.$ymd.'';
    $fullpath = $basedir;
    if(!is_dir($fullpath)){
      mkdir($fullpath,0777,true);
    }
    $types = empty($types)? array('jpg', 'gif', 'png', 'jpeg'):$types;

    $img = str_replace(array('_','-'), array('/','+'), $img);

    $b64img = substr($img, 0,100);

    if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $b64img, $matches)){

    $type = $matches[2];
    if(!in_array($type, $types)){
      return array('status'=>1,'info'=>'图片格式不正确,只支持 jpg、gif、png、jpeg哦!','url'=>'');
    }
    $img = str_replace($matches[1], '', $img);
    $img = base64_decode($img);
    $photo = '/'.md5(date('YmdHis').rand(1000, 9999)).'.'.$type;
    file_put_contents($fullpath.$photo, $img);

      $ary['status'] = 1;
      $ary['info'] = '保存图片成功';
      $ary['url'] = $basedir.$photo;

      return $ary;

    }

      $ary['status'] = 0;
      $ary['info'] = '请选择要上传的图片';

      return $ary;
  }

以上就是PHP代码,原理也很简单,拿到接口上传的base64,然后再转为图片再储存。

使用的是thinkphp 3.2,无需数据库,PHP环境直接运行即可。

php目录路径为:

‪Application\Home\Controller\Base64Controller.class.php

html目录路径为:

Application\Home\View\Base64\imagesupload.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-05-26

PHP常用函数之base64图片上传功能详解

本文实例讲述了PHP常用函数之base64图片上传功能.分享给大家供大家参考,具体如下: HTML页面代码: <html> <head> <meta charset="utf-8"> </head> <body> <img id="articleImg" width="180" height="100"> <input type="file

php实现将base64格式图片保存在指定目录的方法

本文实例讲述了php实现将base64格式图片保存在指定目录的方法.分享给大家供大家参考,具体如下: <?php header('Content-type:text/html;charset=utf-8'); $base64_image_content = $_POST['imgBase64']; //匹配出图片的格式 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $ty

php读取和保存base64编码的图片内容

本文实例为大家分享了php读取和保存图片内容的具体代码,供大家参考,具体内容如下 <?php header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = './4296762_165319032930_2.jpg'; $image_info = getimagesize($image_file); $base64_image_content = "data:{$image_info

php基于base64解码图片与加密图片还原实例

本文实例讲述了php基于base64解码图片与加密图片还原的实现方法.分享给大家供大家参考.具体实现方法如下: 本例中$data是一段经过base64编码的图片.具体代码如下: 复制代码 代码如下: <?php //文件名:base64.php $data="/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ

PHP保存Base64图片base64_decode的问题整理

PHP对Base64的支持非常好,有内置的base64_encode与base64_decode负责图片的Base64编码与解码. 编码上,只要将图片流读取到,而后使用base64_encode进行进行编码即可得到. /** * 获取图片的Base64编码(不支持url) * * @param $img_file 传入本地图片地址 * * @return string */ function imgToBase64($img_file) { $img_base64 = ''; if (file_

php实现base64图片上传方式实例代码

本例子中没有采用File Post上传文件方式!原理一样,为了更加的理解base64 选择将其输出在文本域中,并提交至服务器!运用到项目中建议采用提交File方式. html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

PHP实现将base64编码字符串转换成图片示例

本文实例讲述了PHP实现将base64编码字符串转换成图片.分享给大家供大家参考,具体如下: 步骤: 1. 获取base64文件: 复制代码 代码如下: $image="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRw

php解析base64数据生成图片的方法

本文实例讲述了php解析base64数据生成图片的方法.分享给大家供大家参考,具体如下: $base64 = "/9j/4AAQSkZJRgABAQEAkACQAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAH

利用PHP将图片转换成base64编码的实现方法

先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输.由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下.虽然图片可能直接传输,但是我们也可以将它变成字符串直接放在源码里,而不需要浏览器在读取到源码后再从服务器上下载. 如何使用PHP对图片进行base64解码输出 <?php $img = 'test.jpg'; $base64

python将图片文件转换成base64编码的方法

本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64 f=open(r'c:\jb51.gif','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() 调用方法如下: 复制代码 代码如下: <img src="R0lGODlh1wBOAPcAAAAAAP///7a4u+jq7bG1ucrN0N7g4tLU

JS实现图片转换成base64的各种应用场景实例分析

本文实例讲述了JS实现图片转换成base64的各种应用场景.分享给大家供大家参考,具体如下: 网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少,所以我就在这里将各种场景系统的介绍一下: 场景一:将用户本地上传的资源转化,即用户通过浏览器点击文件上传时,将图片资源转化成base64: <input type="file" i

利用python将图片转换成excel文档格式

前言 本文主要介绍了关于利用python将图片转换成excel文档的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现步骤 读取图像,获取图像每个像素点的RGB值: 根据每个像素点的RGB值设置excel每个方格的颜色值: 根据像素点的坐标,写入excel文件: 保存退出: 示例代码 from PIL import Image import numpy as np import time import matplotlib.pyplot as plt import

JavaScript将字符串转换成字符编码列表的方法

本文实例讲述了JavaScript将字符串转换成字符编码列表的方法.分享给大家供大家参考.具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 Array.map('foo', function(x) { return String.charCodeAt(x) }) // is [112,111,111] 方法2: JavaScript 1.7 [ String.charCodeAt(x) for ea

python将.ppm格式图片转换成.jpg格式文件的方法

将.ppm格式的图片转换成.jpg格式的图像,除了通过软件转换,还可以使用python脚本直接转换,so easy!!! from PIL import Image img = Image.open("images/25_color.ppm") img.save("JPGimg/25_color.jpg") img.show() 以上这篇python将.ppm格式图片转换成.jpg格式文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持

canvas压缩图片转换成base64格式输出文件流

昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下 <!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--&

JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

js 将图片连接转换成base64格式的简单实例

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Ano

Java实现将png格式图片转换成jpg格式图片的方法【测试可用】

本文实例讲述了Java实现将png格式图片转换成jpg格式图片的方法.分享给大家供大家参考,具体如下: import java.awt.Color; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class ConvertImageFile { public static void main(Str