Question

我正在尝试创建一个模因生成器，当用户单击一个按钮时，应该生成一个模因，但是如果未选择该图像，则会创建一个空图像，因此我想创建一种检查以确定图像是否已首先设置。

这是选择图片的代码

function readURL(input) {
       if (input.files && input.files[0]) {
           var reader = new FileReader();

           reader.onload = function (e) {
               $('.blah')
                   .attr('src', e.target.result);
           };

           reader.readAsDataURL(input.files[0]);
       }
   }

在此之后，我试图创建一个检查是否设置了src属性，但是代码仍然运行并创建了一个空图像

function createMeme(){
  let make = $('.blah');
  let out = $('#img-out > img');
  if (make.src) {
    return "oijoijojioij";
  } else {
    html2canvas([document.getElementById('gen-img')], {
      onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
        var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        //ajax call to save image inside folder
        $.ajax({
          url: 'save-image.php',
          data: {
            imgdata:imgdata
          },
          type: 'post',
          success: function (response) {
            console.log(response);
            out.attr('src', response);
          }
        })
      }
    });
  }
}

Answer 1

您可以使用Javascript Image类代替FileReader（）

var img=new Image();
img.onload=function(){
   ...
};
img.onerror=function(){
   ...
};
img.src=URL;

如何检查图片的src属性是否有效？

1 个答案: