javascript - 使用 JavaScript 在解析中保存图像

Question

我能够在 Parse 中存储字符串和数字，但在 Parse 中存储图像时遇到问题。

本质上，用户从他们的图库中选择一个图像，然后将该图像插入到具有如下 id 的图像中:

        <img src="content/profilef.png" id="profilePic1" />
        <img src="content/profile.png" id="profilePic2" />

        <img src="content/profileu.png" id="profilePic3" />

这就是我试图抓取并存储到 Parse 中的内容，我已经在解析中创建了 3 个文件列。

这是我的 JavaScript 代码，除了我尝试存储的图像之外，一切都正常:

function accountCreation(event){
    event.preventDefault();
    var bio = document.getElementById("profileDescription").value;
    var city = document.getElementById("selectCity").value;
    var men = document.getElementById("selectMen").checked;
    var women = document.getElementById("selectWomen").checked;

       var profilePic1 = document.getElementById("profilePic1").value;

                            var profilePic2 = document.getElementById("profilePic2").value;
                            var profilePic3 = document.getElementById("profilePic3").value;





    var user = Parse.User.current();
        user.set("profilePic1", profilePic1);
        user.set("profilePic2", profilePic2);
        user.set("profilePic3", profilePic3);

    user.set("bio", bio);
    user.set("city", city);
    user.set("menPreference", men);
    user.set("womenPreference", women);

    user.save(null, {
        success: function(user) {
            alert("succesfully stored");
        },

        error: function(user, error) {
            alert('error' + error.message);
        }
    });
}

提前致谢，

更新:因为我正在使用Intel XDK(或phonegap)，所以我无法在本地使用php，所以我必须将php代码托管在云端。，下面是我得到的错误

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

 failed to create file, src= content/profilef.png, encoded img=
accountCreation.js:56 failed to create file, src= content/profile.png, encoded img=
accountCreation.js:56 failed to create file, src= content/profileu.png, encoded img=

脚本

$(function() {

    //Initialize Parse below by using credentials provided for App on Parse 
Parse.initialize("ID", "ID");

// click handlers
    // this watches for clicks to save user data 
    $('#accountCreation').click(function(event){
        event.preventDefault(); // only needed if the clicked element is a link
        accountCreation();
    })




    function accountCreation(){
            $('#container').hide(); // hide the display while we save the info as it will take a few seconds, you should do a loading bar or something here instead

            var user = Parse.User.current(); // get the currently logged in user object
            var bio = $('#profileDescription').val();
            var city = $('#selectCity').val();
            var men = $('#selectMen').is(':checked'); // returns true or false
            var women = $('#selectWomen').is(':checked'); // returns true or false

            // $('.images') retruns an array of elements with the class name "images"
            // loop through each image element
            $('.images').each(function(index, element) {
                  // first we'll need to get the image source 
                  var src = $(element).attr('src');
                  // alone, the source is just a url and not of much use to us
                  // we'll need to take the source and create a base64 encoded string from it
                  // we'll use an ajax call to a small php script to do this
                  var encodedImg;
                  try {
                    $.ajax({
                       type: "POST",
                       url: "http://addo-env.elasticbeanstalk.com/aws/encodeImgToBase64.php", // you may need to adjust this path depending on where you store the file in relation to this file
                       data: 'url='+src,
                       success: function(data){
                         encodedImg = data; // encodedImg is now a base64 encoded string 
                       },
                       async: false 
                       // note the use of `async: false` here
                       // normally the ajax call would run asynchronously in the background  
                       // and the below code would be run immediately, even before the ajax call has finished 
                       // `async: false` stops execution here and forces the ajax call to finish before any other code is run 
                       // this isnt normally a great way to do this since it locks up the page while the funcion is working
                       // but, honestly, this is a save function and its pretty standard for other features on a page to be unavailable while saving data
                       // that said, this could be written better with `promises` but it works as is
                     });
                    var file = new Parse.File("photo.jpg", { base64: encodedImg }); // this part actually saves the image file to parse
                    // From the Docs: Notice in this example that we give the file a name of photo.jpg. You don't need to worry about filename collisions. 
                    // Each upload gets a unique identifier so there's no problem with uploading multiple files named photo.jpg.
                    user.set("image"+index,file); // set this image to the corosponding column on our object 
                  } catch (e) {
                    console.log('failed to create file, src= '+src+', encoded img='+encodedImg)
                  }
            });
            user.set("bio", bio);
            user.set("city", city);
            user.set("menPreference", men);
            user.set("womenPreference", women);
            // save our new 
            user.save(null,{
              success: function(user) { 
                  $('#message').html('Profile Updated!');
                  $('#container').show(); // show the screen again, you should just remove your loading bar now if you used one
              },
              error: function(user, error) {
                  console.log('Failed to create new object, with error code: ' + error.message);
              }
            });
     }

更新2:

<?php
header('Access-Control-Allow-Origin: *');
if (isset($_POST['url']) ){
    echo base64_encode(file_get_contents($_POST['url']));
}else{
    echo 'Error: No image to encode';
}
?>

这是上面的PHP代码，它有 header 访问控制允许允许跨域访问，如果没有 header ，我会收到错误。它托管在 aws 上，链接如下:

http://addo-env.elasticbeanstalk.com/aws/encodeImgToBase64.php

我无法将其存储在本地，因为 php 无法与phonegap 或 intel xdk 配合使用，因此必须将其托管在云端

Answer 1

不幸的是，Parse.com 无法直接从 url 保存图像文件。因为您想从页面上的 img 标记获取图像(而不是用户上传图像的输入)，所以您需要使用 canvas元素将图像转换为 base64 编码字符串，使用这些字符串保存解析文件，然后将文件与您的用户关联，最后保存用户对象。

下面我还将向您展示如何检索和显示存储的图像。注释应该可以解释大部分内容。

此外，here is a fully working demo这样你就可以看到它是如何工作的

jQuery:

// click handler
// this watches for clicks to save user data 
$('#accountCreation').click(function(event){
    event.preventDefault(); // only needed if the clicked element is a link
    accountCreation();
})

function accountCreation(){
    $('#container').hide(); // hide the display while we save the info as it will take a few seconds, you should do a loading bar or something here instead
    var user = Parse.User.current(); // get the currently logged in user object

    // loop through each image element
    var promises = $('.images').map(function(index, element) {
        var deferred = $.Deferred();
        var src = $(element).attr('src');
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var base64Img = canvas.toDataURL('image/png');
            // Clean up
            canvas = null; 
            deferred.resolve(base64Img);
        };
        img.src = element.src;
        return deferred;
    });
    $.when.apply($, promises).then(function() {
        // arguments[0][0] is first result
        // arguments[1][0] is second result and so on
        for (var i = 0; i < arguments.length; i++) {
            var file = new Parse.File("photo.jpg", { base64: arguments[i]}); // this part actually saves the image file to parse
            user.set("image" + i, file); // set this image to the corosponding column on our object 
        }
        var bio = $('#profileDescription').val();
        var city = $('#selectCity').val();
        var men = $('#selectMen').is(':checked'); // returns true or false
        var women = $('#selectWomen').is(':checked'); // returns true or false

        user.set("bio", bio);
        user.set("city", city);
        user.set("menPreference", men);
        user.set("womenPreference", women);

        // save the user object
        user.save(null,{
          success: function(user) { 
                  $('#message').html('Profile Updated!');
                  $('#container').show(); // show the screen again, you should just remove your loading bar now if you used one
          },
          error: function(user, error) {
                  console.log('Failed to create new object, with error code: ' + error.message);
          }
        });
    });
 }


// the below function demonstrates how to retrieve and display images stored on parse       
$('#loadUserData').click(function(){
      event.preventDefault(); // only needed if the clicked element is a link
      var user = Parse.User.current(); 



      var image0 = user.get("image0"); // get the stored image objects
      var image1 = user.get("image1");
      var image2 = user.get("image2");
      // make sure we found images
      if(image0 && image1 && image2){
          var imgElement0 = $('<img>'); // create an image tag
          imgElement0.attr('src', image0.url()); // set the souce or the img tag to the url of the image objct
          $('#image0').html(imgElement0); // display the image

          var imgElement1 = $('<img>');
          imgElement1.attr('src', image1.url());
          $('#image1').html(imgElement1);

          var imgElement2 = $('<img>');
          imgElement2.attr('src', image2.url());
          $('#image2').html(imgElement2);


          var bio = user.get("bio");
          $('#bio').html(bio);

          var city = user.get("city");
          $('#city').html(city);

          var menPreference = user.get("menPreference");
          $('#menPreference').html(menPreference);

          var womenPreference = user.get("womenPreference");
          $('#womenPreference').html(womenPreference);
          $('#message').html('Data retrieved!');
      }
      else{ 
        alert('No data available on the user object. Click "Update Profile" to store the data'); 
      }
  })        

我在示例中使用的 sudo-html:

<div style="margin:auto;width:600;">
<table width="600" border="1" style="margin-left:25px; float:left;">
  <tbody>
    <tr>
      <td>Image 1:</td>
      <td> <img src="http://i.imgur.com/QxD2r0x.png" class="images" /></td>
    </tr>
    <tr>
      <td>Image 2:</td>
      <td> <img src="http://i.imgur.com/sIxiQWH.png" class="images" /></td>
    </tr>
    <tr>
      <td>Image 3:</td>
      <td> <img src="http://i.imgur.com/FgSuSKO.png" class="images" /></td>
    </tr>
    <tr>
      <td>Men:</td>
      <td> <input type="checkbox" id="selectMen" checked /></td>
    </tr>
    <tr>
      <td>Women:</td>
      <td><input type="checkbox" id="selectWomen" checked /></td>
    </tr>
    <tr>
      <td>City: </td>
      <td><input type="text" id="selectCity" value="My city..." /></td>
    </tr>
    <tr>
      <td>Description:</td>
      <td><textarea id="profileDescription">My cool description..."</textarea></td>
    </tr>
    <tr>
      <td colspan="2" style="padding:25px;"><a href="#" id="accountCreation" class="btnLink">Update profile!</a></td>
    </tr>
  </tbody>
</table>


<table width="600" border="1" style="margin-left:25px; float:left;">
  <tbody>
    <tr>
      <td colspan="2" style="padding:25px;"><a href="#" id="loadUserData" class="btnLink">Click Here To Load Stored User Data Below</a></td>
    </tr>
    <tr>
      <td colspan="2" style="padding:25px;"><a href="#" id="resetUser" class="btnLink">Click Here To Reset User</a></td>
    </tr>
    <tr>
      <td>Image 1:</td>
      <td id="image0"></td>
    </tr>
    <tr>
      <td>Image 2:</td>
      <td id="image1"></td>
    </tr>
    <tr>
      <td>Image 3:</td>
      <td id="image2"></td>
    </tr>
    <tr>
      <td>Men: </td>
      <td id="menPreference"></td>
    </tr>
    <tr>
      <td>Women:  </td>
      <td id="womenPreference"></td>
    </tr>
    <tr>
      <td>City:</td>
      <td id="city"> </td>
    </tr>
    <tr>
      <td>Description:</td>
      <td id="bio"></td>
    </tr>
  </tbody>
</table>
<div>