t1441332354 2018-06-06 09:04 采纳率: 71.8%
浏览 1016
已采纳

关于ajax传值失败的问题

这是前端代码

 <body>
  <div class="booth">
    <video id="video" width="400" height="300"></video>
    <input id='tack' type="button" value="拍照">
    <canvas id='canvas' width='400' height='300'></canvas>
    <img id='img' src=''>
    <input type="button" onclick="uploadImage();" value="上传">
  </div>

  <script>
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        snap = document.getElementById('tack'),
        img = document.getElementById('img'),
        vendorUrl = window.URL || window.webkitURL;
                    //媒体对象
    navigator.getMedia = navigator.getUserMedia ||
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false  //不适用音频
    }, function(strem){
        console.log(strem);
        video.src = vendorUrl.createObjectURL(strem);
        video.play();
    }, function(error) {
        //error.code
        console.log(error);
    });
                    snap.addEventListener('click', function(){

        //绘制canvas图形
        canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

        //把canvas图像转为img图片
        img = canvas.toDataURL("image/png");

    });

    function uploadImage(){
        $.ajax({
            type:'post',
            url:'UploadImage',
            data:{image:img},
            async:false,
            datatype:'json',
            success:function(data){
                if(data.success){
                    alret('上传成功');
                }else{
                    alret('上传失败');
                }
            },
            error:function(err){
                alert('网络故障');
            }
        });
    }

这是后台代码
图片说明

我想用ajax把“img=canvas.toDataURL("image/png")”的数据传回后台UploadImage,可是后台打印出来的一直是null,想请问代码应该怎么修改?
如果用来传,应该怎么写

  • 写回答

4条回答 默认 最新

  • fengyubanlan 2018-06-06 09:12
    关注

    图片说明
    你这里ajax上传的参数名字写的是image,你后台是有img获取的,应该是获取不到的吧,你把后台获取的名字改成image试下呢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • silence做作 2018-06-06 09:10
    关注

    你ajax里面的data参数名是image,,然后webSerclet里面接收的img,肯定是null啊,你讲后台的改成request.getParameter("image");没太仔细看每个细节,你可以试下

    评论
  • I-T枭 2018-06-06 09:17
    关注

    function UploadPic() {

    // Generate the image data
    var Pic = document.getElementById("myCanvas").toDataURL("image/png");
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
    
    // Sending the image data to Server
    $.ajax({
        type: 'POST',
        url: 'Save_Picture.aspx/UploadPic',
        data: '{ "imageData" : "' + Pic + '" }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert("Done, Picture Uploaded.");
        }
    });
    

    }

    评论
  • 丶瞳丿 2018-06-06 09:19
    关注

    如果不行的话,可以用window.top.location,href=地址?img=canvas.toDataURL("image/png")

    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥50 vue-codemirror如何对指定行 指定位置的 字符进行背景颜色或者字体颜色的修改?
  • ¥15 有人会思科模拟器嘛?
  • ¥30 遇到一个的问题,请教各位
  • ¥20 matlab报错,vflux计算潜流通量
  • ¥15 我该如何实现鼠标按下GUI按钮时就执行按钮里面的操作的方法
  • ¥15 关于#硬件工程#的问题:我这边有个锁相环电路没有效果
  • ¥15 20款 27寸imac苹果一体机装win10后,蓝牙耳机和音响放歌曲卡顿断断续续.
  • ¥15 VB.NET 父窗体调取子窗体报错
  • ¥15 python海龟作图如何改代码使其最后画出来的是一个镜像翻转的图形
  • ¥15 我不明白为什么c#微软的官方api浏览器为什么不支持函数说明的检索,有支持检索函数说明的工具吗?