本地图片如何生成url

发布时间：2023-05-22

一、使用base64

一般情况下，本地图片是需要上传到服务器之后才能让web页面访问的。但是如果图片较小，可以使用base64将图片转换成编码后的字符串，直接将字符串嵌入到HTML或CSS中，这样可以节省一次HTTP请求。以下是一个示例代码：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">

以上代码中的“data:image/png;base64,”部分表示图片的格式，可以根据实际情况进行调整。由于base64字符串较长，如果需要多次使用建议封装成函数或变量。

二、使用file协议

在某些情况下，我们需要在本地环境下使用图片，比如在开发调试过程中，可以直接使用file协议访问本地图片。以下是一个示例代码：

<img src="file:///C:/Users/xxx/Desktop/picture.png">

以上代码中的路径可以根据实际情况进行调整，需要注意的是，在使用file协议时需要将本地文件路径转换成URL编码格式。

三、使用服务器代理

在实际开发中，我们往往需要使用远端服务器上的图片资源。但是，如果图片资源未授权公开访问，就无法直接通过URL进行访问。这时可以使用代理技术，先将需要访问的图片资源下载到本地服务器，最终用户访问的是本地服务器上的图片链接。以下是一个示例代码：

function getProxyUrl(url) {
  var proxyUrl = 'http://localhost/proxy.php?url=' + encodeURIComponent(url);
  return proxyUrl;
}
var imgUrl = 'https://example.com/img/picture.jpg';
var proxyUrl = getProxyUrl(imgUrl);
var img = new Image();
img.src = proxyUrl;
document.body.appendChild(img);

以上代码中，getProxyUrl函数会将需要访问的图片URL作为参数，拼接成代理服务器的URL，并进行URL编码。在实际中，需要在服务器上部署proxy.php文件，并将proxyUrl作为Image标签的src属性。

四、使用URL.createObjectURL

URL.createObjectURL方法可以将本地文件转换成Blob URL（类似于http协议）。这个URL只在当前会话（窗口）中有效，并且当关闭页面时自动释放。以下是一个示例代码：

var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  var file = input.files[0];
  var url = URL.createObjectURL(file);
  var img = new Image();
  img.onload = function() {
    URL.revokeObjectURL(url);
  };
  img.src = url;
  document.body.appendChild(img);
});

以上代码中，input元素监听了“change”事件，当用户选择文件之后，会使用URL.createObjectURL将文件转换成Blob URL，然后将URL嵌入到Image标签中，同样的，在图片加载完成后，使用URL.revokeObjectURL释放URL。

五、使用canvas

使用canvas可以将本地图片绘制成图像，并将其转换成DataURL。以下是一个示例代码：

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
  console.log(dataURL);
};
img.src = 'picture.jpg';

以上代码中，首先创建一个Image对象，监听load事件。load事件中创建了canvas元素和2d上下文对象，设置其宽高，并将图片绘制到其中，最终使用canvas.toDataURL将其转换为DataURL。

推荐文章