h5保存图片到手机相册
时间: 2023-09-27 20:06:27 浏览: 97
要在H5页面中将图片保存到手机相册,可以使用HTML5的File API和Canvas API。下面是一个简单的示例代码:
```javascript
// 获取图片URL
var imgUrl = 'your_image_url';
// 创建Image对象
var img = new Image();
img.src = imgUrl;
// 图片加载完成后执行
img.onload = function() {
// 创建Canvas对象
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// 将图片绘制到Canvas上
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
// 将Canvas转成Blob对象
canvas.toBlob(function(blob) {
// 创建下载链接
var a = document.createElement('a');
a.download = 'image.png';
a.href = URL.createObjectURL(blob);
// 触发下载
a.click();
// 释放URL对象
URL.revokeObjectURL(a.href);
}, 'image/png');
};
```
以上代码会将图片转成Canvas对象,并将Canvas对象转成Blob对象,最后通过创建下载链接的方式将Blob对象下载到本地,从而实现将图片保存到手机相册的功能。需要注意的是,该代码只能在支持File API和Canvas API的浏览器中使用。