如何仅从图像 url 将图像发送到服务器？

Question

我正在尝试将图像发送到我的 chrome 扩展程序的服务器。我正在使用之前讨论中的代码 --> how to send image to server with http.post in javascript and store base64 in mongodb。

我的问题是图像从未真正上传到页面。例如，我试图将图像上传到不是我的服务器上的此输入：image upload section。代码运行后，图片部分不上传图片，这是我程序的最终目标。

这是所有 console.log() 运行后终端的样子：enter image description here

有谁知道这背后的原因以及我如何解决这个问题？简单地说，我希望将所需的图像上传到“添加照片”部分。

如果有人对如何解决整个问题有更好的解决方案，请告诉我！

      var convertToBase64 = function(url, imagetype, callback){

          var img = document.createElement('IMG'),
              canvas = document.createElement('CANVAS'),
              ctx = canvas.getContext('2d'),
              data = '';

          // Set the crossOrigin property of the image element to 'Anonymous',
          // allowing us to load images from other domains so long as that domain
          // has cross-origin headers properly set

          img.crossOrigin = 'Anonymous'

          // Because image loading is asynchronous, we define an event listening function that will be called when the image has been loaded
          img.onload = function(){
              console.log('hoiii');
              // When the image is loaded, this function is called with the image object as its context or 'this' value
              canvas.height = this.height;
              canvas.width = this.width;
              ctx.drawImage(this, 0, 0);
              console.log(canvas);
              console.log(ctx);
              data = canvas.toDataURL(imagetype);
              console.log(data);
              callback(data);
          };

          // We set the source of the image tag to start loading its data. We define
          // the event listener first, so that if the image has already been loaded
          // on the page or is cached the event listener will still fire

          img.src = url;
          console.log(img);
      };

      // Here we define the function that will send the request to the server.
      // It will accept the image name, and the base64 data as arguments

      var sendBase64ToServer = function(name, base64){
          var httpPost = new XMLHttpRequest(),
              path = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAFmklEQVRYR+1YWUiVaxRdx1nLOh7NynMpDbOOA4Z5pdvgQNFDb3VJIknqoVIQExyTNBHRCppoEkW0yVKQsMT7IBZGEZoiRaSlpSYOWM6m5HhZW4x75db5f4en24aDcv7z/Xt9a++99v4+zdTU1BTmaa9fv8a1a9fw9OlTTE5OwtvbGwEBAVi6dCl27NiBdevWzdmDZj4A29racPLkSTx48ABDQ0Pw9fXFnj174O/vj9HRUTx8+BAvXrzA3r17ERsbCxsbG9VA5wywtbUV8fHxKCwsxMTEBHbt2oXTp09j+/bt30F8/foVO3fuRGVlJY4cOYKUlBSsWbNGFcg5ARwfH0dCQgLOnz8vzjZt2oTs7GxhcLa9ffsWHh4e8vXhw4eRm5u7+ABLSkoQFhYGhpiWnp4uof6RkdX379/D3t4eOTk52Lp1q2KQc2IwNDQUt2/flpxiEWRmZsLZ2fmHTo8fP466ujp8+fIFBw4cQHJy8uIBZM6Rvd7eXlhaWuLWrVsIDg7+qcNLly4hPz9fcnXDhg3yv1JTzWBISIg40Ol00Gg0wooxe/78uRQQjarGql+2bJmxZfJcFcBPnz7Bx8cH3d3dsphs7t+/36ijd+/e4ejRo7C2tpZNJSUlYdu2bUbXqQZYUFCAY8eOYWBgAHZ2dqJxDJkxa2hoQHh4OExNTTE2NiY5GBgYaGyZegYPHTqEu3fvSpjo4MmTJ4qcEGBUVJSIN7WRerh7925Fa1WF2MvLC2/evJEXnzlzRoRaibGC4+LihHl2nIyMjMUB6OLigubmZixZsgQvX76EwWBQgg81NTUi7Kx8ivzVq1f/1XF+9hJVDFLrWlpapNdWVFQoAscfPX78WNgmwOXLl4uGuru7K1qvCiClpa+vD6dOnUJqaqoiB/wRZSU6OhqDg4My2bATrVixQtF6VQApERTnvLw86QhKjbp54sQJjIyMyChWXl4OKysrRcsVA7x48SJu3LghIaZksDsotaSkZFy+fFkY5GTj5/e70qXKhZoD6YULF/Dx40eZWmJiYsCqNpZLk5MAuw9FndrJoUGn0y48QDogC+wmXV1dMDc3l4k5Pj4BBw+GYOXK/86p4uJHspnGxkZs3rwZ1dVVisGp6iRpaWm4f/++dANWIwfWadMISIo4da6srAzV1dUiyNwAWbtz544MChwqCgruLTxA5g3Zo/bR+vv78fnz5+8AV61aLeMWi4AzIiudWunk5CRdh+wRaGJiIqKiIhce4Llz5+R8wSqmQ7LX2dkpYV6/3g39/QPo6emRyiQoMse2RtaampoEkJubmwyrBoPx3v3PHSiq4sjISBQXF8uASmbYrvjhhGxubgGeCwmIz8gkpYjFROY4HHBjLKaKCmW9WzXAs2fPCoOUCTMzM3z79k3CTIBk0MrKWkJOVrVaLfR6vQDu6OjAhw8fZJ2rqytevapVFV7FRcJmf+XKFZSWloqDGZAM5ZYtf2BwcOj7IEAhnjleEiDX8rN27Vr5a2KiDqOiEDOXsrKyRJwp1Gx5HD6Zj3r9b9Dp7KWF8dBuYmIiAy0ZJSB+x5zloFtTM11kakwRQL6QRcDTG4EyZDSCMRjcodXawdPTU6qYIaXEsGAoR5ymbW1tERERgfT0NDXYpkVMzc0Cc+z69evS/Nvb22V0IoOjo2NwcHAQUBzHmJ8sIj5nwfCQxQHDwUG3uABn3l5fXy/jflVVFfbt+xOlpX/h5s2bwtiMkV3mKK88eKug169WDU41g7M9PHv2TAbP1tbpOxqG1sLCAhs3bpTLIx6MLC3N5wRsZpGqEM/2NDw8jLq6ejg7u6C2thZBQUEwNdVgfHwSZmYqy/UH25gXQL7z0aMS+Pn5gXcwQUHKTmpqKJ03wKKiIjg6OsqtFbVuoe0XwPky+ovBXwwaY+B/X8V/A+fXNLaIW65OAAAAAElFTkSuQmCC",
              data = JSON.stringify({image: base64});
          httpPost.onreadystatechange = function(err) {
                  if (httpPost.readyState == 4 && httpPost.status == 200){
                      console.log(httpPost.responseText);
                  } else {
                      console.log(err);
                  }
              };
          // Set the content type of the request to json since that's what's being sent
          httpPost.open("POST", path, true);
          httpPost.setRequestHeader('Content-Type', 'image/jpeg');
          httpPost.send(data);
      };

      // This wrapper function will accept the name of the image, the url, and the
      // image type and perform the request

      var uploadImage = function(src, name, type){
          convertToBase64(src, type, function(data){
              sendBase64ToServer(name, data);
          });
      };

      // Call the function with the provided values. The mime type could also be png
      // or webp

      uploadImage(result.products[pointer][3], 'cool.jpeg', 'image/jpeg');