js代码获取处理本地或远程图片的方法

编辑:管理员 发布时间:2023-11-03 00:07:371340

在本文中,我们将介绍如何使用JavaScript代码简单的获取本地或远程图片对象来对其进行图片裁剪图片尺寸修改处理等操作。

1、js获取本地图片

在HTML5中,我们可以通过File API获取用户设备上的文件。下面是一个简单的例子,它创建了一个input元素让用户选择图片文件,并使用FileReader API将该文件读入内存并显示为img元素的内容:


html

<!DOCTYPE html>

<html>

<body>


<input type="file" id="myFile">

<img id="previewImg" style="width:auto;">

<script>

document.getElementById('myFile').addEventListener('change', function() {

  var file = this.files[0];

  var reader = new FileReader();

  

  reader.onload = function(e) {

    document.getElementById("previewImg").src = e.target.result;

  };

  

  reader.readAsDataURL(file);

});

</script>


</body>

</html>

在这个例子中,当用户选择一个文件后,input元素的'change'事件会被触发。在事件处理函数中,我们首先通过this.files[0]获取被选中的文件,然后创建一个新的FileReader对象。


接下来,我们设置FileReader的'onload'事件处理器,它会在文件读取完成后被调用。在事件处理器中,我们将读取到的数据赋值给img元素的'src'属性。


最后,我们调用FileReader的'readAsDataURL'方法开始读取文件。这个方法会把文件转换为一个data: URL格式的字符串,可以用于设置img元素的src属性。


2、js获取远程图片

对于远程图片,我们可以使用fetch API来获取其数据。fetch API返回的是一个Promise,解析后的结果是一个Response对象。我们可以把这个Response对象转换为一个blob(二进制对象),然后使用FileReader的readAsDataURL方法将其转换为一个data: URL格式的字符串,可以用于设置img元素的src属性。


下面是一个例子:


html

<!DOCTYPE html>

<html>

<body>


<img id="remoteImg" style="width:auto;">

<button onclick="loadRemoteImage()">Load Remote Image</button>


<script>

function loadRemoteImage() {

  fetch('https://xxxxx/image.jpg')

    .then(response => response.blob())

    .then(blob => {

      let objectURL = URL.createObjectURL(blob);

      document.getElementById("remoteImg").src = objectURL;

    });

}

</script>


</body>

</html>

在这个例子中,当我们点击按钮时,loadRemoteImage函数会被调用。它首先发起一个fetch请求获取远程图片的数据,然后将返回的Response对象转换为一个blob。接着,我们调用URL.createObjectURL方法生成一个指向这个blob的URL,最后把这个URL赋值给img元素的src属性。

TAGS: js 图片处理
热门文章
最新文章

热门标签

数学计算路径命令行表单字符符号nginxcookiejavapython数组文字处理小数服务器管理apache图片处理