在本文中，我们将介绍如何使用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属性。