H5 可以实现点击按钮保存图片到相册功能吗？

挑战

69234269528

发布于
11 月 15 日上海

更新于
11 月 15 日

H5 可以实现点击按钮保存图片到相册的功能吗？
希望实现在微信中点击按钮保存图片到相册，同时希望在浏览器中点击按钮保存图片到相册，APP内嵌H5中，点击按钮保存图片到相册？
这三个环境下是否可以实现这个功能，如果可以怎么写呢？

html5

阅读 554

4 个回答

发布于
11 月 16 日上海

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保存图片</title>
    <style>
        .container {
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        .btn {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 0;
            display: block;
            width: 100%;
        }
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        img {
            max-width: 100%;
            margin: 20px 0;
            display: block;
        }
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            display: none;
        }
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            align-items: center;
            justify-content: center;
        }
        .loading::after {
            content: '';
            width: 30px;
            height: 30px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="myImage" src="your-image-url.jpg" alt="图片" crossorigin="anonymous">
        <button class="btn" onclick="saveImage()">保存图片</button>
    </div>
    <div class="toast" id="toast"></div>
    <div class="loading" id="loading"></div>

    <script>
        const utils = {
            // 提示
            showToast: function(msg, duration = 2000) {
                const toast = document.getElementById('toast');
                toast.textContent = msg;
                toast.style.display = 'block';
                setTimeout(() => {
                    toast.style.display = 'none';
                }, duration);
            },

            // 显示/隐藏加载
            showLoading: function() {
                document.getElementById('loading').style.display = 'flex';
            },
            hideLoading: function() {
                document.getElementById('loading').style.display = 'none';
            },

            // 检查图片有没有跨域
            checkImageCors: function(imgUrl) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = "anonymous";
                    img.onload = () => resolve(true);
                    img.onerror = () => reject(new Error('图片跨域访问失败'));
                    img.src = imgUrl;
                });
            },

            // 把跨域图片转换为base64
            convertImageToBase64: function(imgUrl) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = "anonymous";
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        resolve(canvas.toDataURL('image/png'));
                    };
                    img.onerror = reject;
                    img.src = imgUrl;
                });
            },

            // 获取文件名
            getFileName: function(url) {
                return url.split('/').pop() || 'image.png';
            },

            // 检查权限
            checkPermission: async function() {
                if (navigator.permissions) {
                    try {
                        const result = await navigator.permissions.query({
                            name: 'camera'
                        });
                        return result.state === 'granted';
                    } catch (e) {
                        console.warn('权限检查失败:', e);
                        return true;
                    }
                }
                return true;
            }
        };

        // 环境检测
        const env = {
            isWeixinBrowser: function() {
                return /micromessenger/i.test(navigator.userAgent.toLowerCase());
            },
            isInApp: function() {
                return window.android || (window.webkit && window.webkit.messageHandlers);
            },
            isMobile: function() {
                return /mobile|android|iphone|ipad/i.test(navigator.userAgent.toLowerCase());
            },
            // 判断iOS版本
            getIOSVersion: function() {
                const match = navigator.userAgent.match(/OS (\d+)_/);
                return match ? parseInt(match[1]) : 0;
            }
        };

        // 微信
        const wechatHandler = {
            // 检查微信配置
            checkJsApi: function() {
                return new Promise((resolve, reject) => {
                    if (!window.wx) {
                        reject(new Error('请先引入微信JS-SDK'));
                        return;
                    }
                    wx.checkJsApi({
                        jsApiList: ['saveImageToPhotosAlbum'],
                        success: function(res) {
                            if (res.checkResult.saveImageToPhotosAlbum) {
                                resolve();
                            } else {
                                reject(new Error('当前微信版本不支持保存图片'));
                            }
                        },
                        fail: reject
                    });
                });
            },

            // 保存图片
            saveImage: async function(imgUrl) {
                try {
                    await this.checkJsApi();
                    
                    utils.showLoading();
                    // 下载图片
                    const downloadRes = await new Promise((resolve, reject) => {
                        wx.downloadImage({
                            serverId: imgUrl,
                            success: resolve,
                            fail: reject
                        });
                    });

                    // 保存到相册
                    await new Promise((resolve, reject) => {
                        wx.saveImageToPhotosAlbum({
                            filePath: downloadRes.tempFilePath,
                            success: resolve,
                            fail: reject
                        });
                    });

                    utils.showToast('保存成功');
                } catch (error) {
                    utils.showToast('保存失败: ' + error.message);
                } finally {
                    utils.hideLoading();
                }
            }
        };

        // App
        const appHandler = {
            // 保存图片到App
            saveImage: function(imgUrl) {
                return new Promise((resolve, reject) => {
                    if (window.android) {
                        // Android
                        try {
                            const result = window.android.saveImage(imgUrl);
                            if (result === true || result === 'success') {
                                resolve();
                            } else {
                                reject(new Error('保存失败'));
                            }
                        } catch (e) {
                            reject(e);
                        }
                    } else if (window.webkit && window.webkit.messageHandlers) {
                        // iOS
                        window.webkit.messageHandlers.saveImage.postMessage({
                            url: imgUrl,
                            callback: 'onSaveImageCallback'
                        });
                        // 注册回调
                        window.onSaveImageCallback = function(result) {
                            if (result.success) {
                                resolve();
                            } else {
                                reject(new Error(result.message || '保存失败'));
                            }
                        };
                    } else {
                        reject(new Error('未找到保存方法'));
                    }
                });
            }
        };

        // 浏览器
        const browserHandler = {
            saveImage: async function(imgUrl) {
                try {
                    utils.showLoading();

                    // 处理跨域图片
                    const base64Url = await utils.convertImageToBase64(imgUrl);
                    
                    const a = document.createElement('a');
                    a.href = base64Url;
                    a.download = utils.getFileName(imgUrl);
                    
                    // 移动端处理
                    if (env.isMobile()) {
                       
                        window.open(base64Url);
                        utils.showToast('请长按图片保存');
                        return;
                    }

                    // PC
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    
                    utils.showToast('保存成功');
                } catch (error) {
                    utils.showToast('保存失败: ' + error.message);
                } finally {
                    utils.hideLoading();
                }
            }
        };

        async function saveImage() {
            try {
                const imgUrl = document.getElementById('myImage').src;
                
                // 检查权限
                const hasPermission = await utils.checkPermission();
                if (!hasPermission) {
                    throw new Error('需要相册权限');
                }

                if (env.isWeixinBrowser()) {
                    await wechatHandler.saveImage(imgUrl);
                } else if (env.isInApp()) {
                    await appHandler.saveImage(imgUrl);
                } else {
                    await browserHandler.saveImage(imgUrl);
                }
            } catch (error) {
                utils.showToast(error.message);
            }
        }

        
        window.addEventListener('load', async function() {
            try {
                const imgUrl = document.getElementById('myImage').src;
                await utils.checkImageCors(imgUrl);
            } catch (error) {
                utils.showToast('图片加载失败，请检查跨域设置');
                document.querySelector('.btn').disabled = true;
            }
        });
    </script>
</body>
</html>

Seven

587116

发布于
11 月 16 日广东

更新于
11 月 16 日

在微信、浏览器和APP内嵌H5中实现点击按钮保存图片到相册的功能。

微信中实现

`这种是在微信中直接点开H5页面跳转浏览器`

在微信中，可以使用微信的JS-SDK来实现保存图片到相册的功能。

步骤：

引入微信JS-SDK。
配置JS-SDK。
使用wx.downloadImage接口下载图片，然后使用wx.saveImageToPhotosAlbum接口保存图片到相册。

示例代码：

wx.config({
  // 配置参数
});

wx.ready(function() {
  document.getElementById('saveBtn').onclick = function() {
    wx.downloadImage({
      serverId: 'your-server-id', // 需要下载的图片的serverId
      success: function(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.localId, // 下载后的图片本地ID
          success: function() {
            alert('图片保存成功');
          }
        });
      }
    });
  };
});

微信小程序中嵌入H5页面的实现

1.在小程序中，通过web-view组件嵌入H5页面。
2.在H5页面中，通过postMessage与小程序进行通信。
3.在小程序中接收消息并调用保存图片的API。

小程序代码

Page({
onLoad: function() {
  const that = this;
  wx.onMessage(function(e) {
    if (e.data.action === 'saveImage') {
      wx.downloadFile({
        url: e.data.url,
        success: function(res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function() {
              wx.showToast({
                title: '图片保存成功',
                icon: 'success'
              });
            }
          });
        }
      });
    }
  });
}
});

H5代码

document.getElementById('saveBtn').onclick = function() {
  const url = 'your-image-url';
  wx.miniProgram.postMessage({
    data: {
      action: 'saveImage',
      url: url
    }
  });
};

浏览器中实现

在浏览器中，可以通过创建一个隐藏的<a>标签并触发点击事件来下载图片。

示例代码：

function saveImage(url) {
  const a = document.createElement('a');
  a.href = url;
  a.download = 'image.png'; // 设置下载文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

document.getElementById('saveBtn').onclick = function() {
  saveImage('your-image-url');
};

APP内嵌H5中实现

在APP内嵌H5中，可以使用HTML5+ API来实现保存图片到相册的功能。

示例代码：

document.getElementById('saveBtn').onclick = function() {
  const img = new Image();
  img.src = 'your-image-url';
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    canvas.toBlob(function(blob) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'image.png';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    });
  };
};

查看全部 4 个回答

推荐问题

H5 可以实现点击按钮保存图片到相册功能吗？

微信中实现

`这种是在微信中直接点开H5页面跳转浏览器`

步骤：

示例代码：

微信小程序中嵌入H5页面的实现

浏览器中实现

示例代码：

APP内嵌H5中实现

示例代码：

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

微信小程序支付成功后续的业务逻辑怎么处理？

使用vue-pdf本地浏览器使用chrome移动机型可以正常预览，但是到了线上就无法正常预览了?

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

有哪个开源的js时间插件支持，年，季度，月，周，日范围选择？