php与ajax结合在一起如何处理图片(代码)

不言
发布: 2018-08-03 11:48:40
原创
2947人浏览过

这篇文章给大家介绍的内容是关于PHP中Trait的特性以及用法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、处理保存 base64编码 的图片,并返回保存的图片url(可用来处理保存canvas转成的图片的)
2、处理图片,并返回 base64编码 的图片(一般解决js跨域的问题)

demo代码(测试请用服务器环境:localhost):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

</head>

  

<body>

  

  

  

  

<div>1、处理保存 base64编码 的图片,并返回保存的图片URL</div>

<img  id="get_imgUrl" src="" / alt="php与ajax结合在一起如何处理图片(代码)" >

<div>2、处理图片,并返回 base64编码 的图片</div>

<img  id="get_base64" src="" / alt="php与ajax结合在一起如何处理图片(代码)" >

  

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

//1、处理保存 base64编码 的图片,并返回保存的图片URL

function getNewImgUrl(){

//    var new_img_src = mycanvas.toDataURL("image/jpg");

    var new_img_src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAzFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////8slq////8fkKoolK4qla7q9fcikasVi6fs9vhkssVgsMMlk60bjqliscTp9Pfe7/P7/f6Fw9GXy9jV6u/R6e5Np7vv9/m53OWr1eBYrcA4nLRJpLr1+vzj8vVut8nF4ukKhaKAwM9er8L3+/3W6/B/v8+BkGs6AAAAHnRSTlMAA2QdWCLjy/bu68iSe3heH/h1CucH8s6fnZuajswXGpFAAAACYElEQVQ4y42V2XriMAyFnQBlX1qg+0QOsUNMkgIJFChQaOf932nkLDN2CP1Gd5gfS+dYEkSLYaX/0h41GqP2S78yJNei0m+DEu1+pRSr9ZoA8OaE31H0HTpvANDs1S656g0AhOv5ZitmM7HdzNchHtxUi9ydxBYx51RMLGsiKOfxQqJ3Gma84tF7zClCeUwoj9/x+NVQuA4WN7epVQhqz7HUjqHm/Zh+IlcMQQ8fSvZqA7nD0bOLnM2YJBuZohrqnX8eIfBE4b5ztGB0jtpTl7qow6ZegCRTxbBzAEsmbFTUTd6jCfuYWsIPwPHo3/TJTx0sh8Z7aMo3MgEWXCbyXXD9mZ1xs+SjLIYvAExCxm3Y7xLBzHfAnSKZc47PEpN2e2gbpAKw5pPU4WlGIjdFbkrTc74GqJA+Ws2z8vOvJzS5PH8njrb3yTMEm9xqvGiFAhhDHausCAy6CeCZ1CHcCksnPUflLLENoU5asFTcs5OkUge1FUeX0CK3EHFLtdlzAVzNeotHcHsBUgSl80Xw/1MXxbipGNfXxfwiT2X2yGt1e56IWWr41JWkYrhJBtef0FeecECMerEp1CLypqgbRObW2kyTlbYZZk4bN9xR5BwItMaVB0njhti4P46CL0fBFvkokNoI4FQ6XN4Sh+u3HK5/4+ofjuefx1VGD2Dlly0Amx5WAD1tpXydxAVJxelLWylk3EmXlIZmS6ozJmr0krW345yla49xvkvWXu/6ImVIX1+k6FL3Xq7mIFxG0TIM5Gq+79ZISRgDsw5K1M2BQa7EcGA+PrQAWg+P5kD/+/gDFJSp26C1IkoAAAAASUVORK5CYII=';

    dataImg = new_img_src.substring(22);

    $.ajax({

            type:'post',

            url:'filesave.php',

            data:{dataimg:dataImg,datatype:'get_imgUrl'},

            beforeSend:function(){

            },success:function(str){

                $('#get_imgUrl').attr('src', str);

            }

    });

}

getNewImgUrl();

  

  

//////////////////////////////////////////////////////////////////////

  

  

//2、处理图片,并返回 base64编码 的图片

getBase64Img('http://qr.topscan.com/api.php?&w=100&m=10&fg=E60012&bg=E3CFB3&text=' + encodeURIComponent('https://blog.csdn.net/') , function(data){

//    base64img = new Image();

//    base64img.src = data;

    $('#get_base64').attr('src', data);

});

function getBase64Img (sourceImgUrl , callback){

//    var sourceImgUrl = 'http://qr.topscan.com/api.php?&w=200&m=0&fg=E60012&bg=E3CFB3&text=' + encodeURIComponent('https://blog.csdn.net/');

    $.ajax({

            type:'post',

            url:'filesave.php',

            data:{dataimg:sourceImgUrl,datatype:'get_base64'},

            beforeSend:function(){

            },success:function(str){

                callback(str);

            }

    });

}

</script>

  

  

  

  

</body>

</html>

登录后复制

filesave.php代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<?php

function rndStr(){

    $string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

    $len = rand(0,3)+5;

    $rst = '';

    $strl = strlen($string);

    for($i=0;$i<$len;$i++){

        $ind = rand(0, $strl);

        $s = $string[$ind];

        $rst .= $s;

    }

    return $rst;

}

 

//要处理的类型

$type = $_POST['datatype'];

//要处理的图片(正常url图片 / base64编码图片)

$getImg = $_POST['dataimg'];

 

//1、处理保存 base64编码 的图片,并返回保存的图片URL(可用来处理保存CANVAS转成的图片的)

if($type == 'get_imgUrl'){

    //以当前时间+随机字符串设置的不会重复的文件名

    $name = time() . rndStr();

     

    $img = str_replace(' ', '+', $getImg);

    $img = base64_decode($img);

     

    //存储图片,注意文件夹是否有写入权限

    $dir = iconv("UTF-8", "GBK", "upfile");

    if (!file_exists($dir)){

        mkdir ($dir,0777,true);

    }

    $f = fopen('upfile/' . $name . '.jpg', 'w+');

    fwrite($f, $img);

    fclose($f);

    //输出保存的图片URL

    echo 'upfile/' . $name . '.jpg';

     

//2、处理图片,并返回 base64编码 的图片(一般解决JS跨域的问题)

}else if($type == 'get_base64'){

    $pic = $getImg;

    //$arr = getimagesize($pic);

    //$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));

    $pic = "data:image/jpg;base64," . base64_encode(file_get_contents($pic));

    echo $pic;

}

?>

登录后复制

相关文章推荐:

php变量的命名规则以及php变量的用法(附代码)

立即学习PHP免费学习笔记(深入)”;

php实现操作文件的各种方式总结(附代码)

以上就是php与ajax结合在一起如何处理图片(代码)的详细内容,更多请关注php中文网其它相关文章!

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号