移动端下载图片到手机相册

移动端使用html2canvas截图并下载，已经获取到base64，如何在移动端（安卓、IOS）下载图片呢？（我使用的a标签download在本地可以下载，但是手机上不行）

base64图片转文件并下载

 base64ImgtoFile(dataurl, filename = '文件名' + Date.now()) {
      // 将base64格式分割：['data:image/png;base64','XXXX']
      const arr = dataurl.split(',');
      // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：
      // image/png
      const mime = arr[0].match(/:(.*?);/)[1]; // image/png
      // [image,png] 获取图片类型后缀
      const suffix = mime.split('/')[1]; // png
      const bstr = atob(arr[1]); // atob() 方法用于解码使用 base-64 编码的字符串
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },

参考

在移动端（Android 和 iOS）上，是无法直接使用 标签的 download 属性来下载图片。
但是，可以通过使用 JavaScript 和一些移动端特定的 API 来实现这个功能。

对于 Android，可以使用下面方法来下载图片：

1.创建一个隐藏的 标签，设置其 href 属性为图像的 base64 数据。
2.使用 JavaScript 触发点击事件来模拟用户点击下载链接。
3.在点击事件处理程序中，使用 Android 的 JavaScript 接口调用下载功能。

展示如何在 Android 上下载图片，示例代码：

// 创建隐藏的 <a> 标签
var a = document.createElement('a');
a.style.display = 'none';

// 设置 <a> 标签的 href 属性为图像的 base64 数据
a.href = 'data:image/png;base64, YOUR_BASE64_DATA';

// 将 <a> 标签添加到文档中
document.body.appendChild(a);

// 触发点击事件
a.click();

// 从文档中移除 <a> 标签
document.body.removeChild(a);

对于 iOS，由于安全限制，直接使用 JavaScript 进行下载是不可行的。但是，你可以创建一个新的浏览器标签页，将图像的 base64 数据作为 URL，然后在标签页中长按图像来保存。

展示如何在 iOS 上下载图片，示例代码：

// 创建一个新的浏览器标签页
var newTab = window.open();

// 将图像的 base64 数据作为 URL
newTab.document.write('<img src="data:image/png;base64, YOUR_BASE64_DATA"/>');

// 提示用户在标签页中长按图像来保存
newTab.document.write('<p>Long press the image to save it.</p>');

注意，iOS 上的下载行为是由操作系统控制的，无法直接通过 JavaScript 触发下载操作。用户需要手动在标签页中长按图像，然后选择保存图像。

以上是一些基本的示例代码，你可以根据你的具体应用场景和需求进行适当的修改。同时，还可以探索一些第三方 JavaScript 库或框架，如 FileSaver.js，它可以简化在不同平台上下载文件的过程。


function downloadImage(base64Data, fileName) {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);

    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: 'image/png' });

  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = fileName;

  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);

  downloadLink.click();

  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadLink.href);
}

// 调用示例
const base64Data = '...'; // 假设为您已经获取到的base64图片数据
const fileName = 'image.png'; // 下载的文件名
downloadImage(base64Data, fileName);

https://www.cnblogs.com/wangdashi/p/14726084.html

看一下这篇文章

在移动端（Android和iOS）上，使用a标签的download属性是无法直接下载base64格式的图片的。但可以通过JavaScript动态创建一个隐藏的链接，并设置其href属性为base64格式的图片数据，然后模拟点击该链接来触发下载。

以下是一个示例代码，展示了如何在移动端下载base64图片：

function downloadBase64Image(base64Data, fileName) {
    // 创建一个隐藏的a标签
    var link = document.createElement('a');
    link.style.display = 'none';
    
    // 设置a标签的href属性为base64图片数据
    link.href = base64Data;
    
    // 设置a标签的download属性为要保存的文件名
    link.download = fileName;
    
    // 将a标签添加到页面中
    document.body.appendChild(link);
    
    // 模拟点击a标签进行下载
    link.click();
    
    // 移除a标签
    document.body.removeChild(link);
}

使用示例：

var base64Data = "data:image/png;base64,iVBORw0KG...";
var fileName = "image.png";
downloadBase64Image(base64Data, fileName);

在上面的示例中，base64Data是base64格式的图片数据，fileName是要保存的文件名。调用downloadBase64Image函数即可触发下载。

请注意，由于移动设备的浏览器对下载行为有一些限制，以上方法可能在某些移动设备上无法正常工作。如果遇到问题，可以尝试使用其他第三方库或插件来实现移动端的图片下载功能。

希望以上解答对您有所帮助！如果还有其他问题，请随时提问。

a标签在手机浏览器应该是可以的啊，你说的本地是指电脑编译器吗

a标签加download属性，有同源限制，把图片转换下再下载
利用canvas的toDataUri方法


// 已有远程且非同源图片链接originUrl
saveImg() {
  const img = new Image();
  img.src = originUrl;
  img.setAttribute('crossOrigin', 'Anonymous');  

  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = 350;
    canvas.height = 350;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, 350, 350);
    // 或使用toBlob转为blob对象
    const imgDataUri = ctx.toDataURL(); // <图片属性><图片质量>('image/png', 0.92)
    // 利用a标签下载
    const a = document.createElement('a');
    a.download = '';
    a.href = imgDataUri;
    document.body.appendChild(a);
    a.click();
    a.remove();
  }
}

如果使用a连接不行的话，你可以写一个下载的方法，当点击连接的时候，调用该下载方法，将图片保存到手机上，下载的代码如下：


    // 下载图片

    downloadFile(fileName, content) {

      try {

        MokkayaAndroid.saveEncodingImageToGallery(content, 'mlm', 'mlm')

      } catch (error) {

        const aLink = document.createElement('a');

        const blob = this.base64ToBlob(content);

        const evt = document.createEvent("HTMLEvents");

        evt.initEvent("click", true, true);

        aLink.download = fileName;

        aLink.href = URL.createObjectURL(blob);

        aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

      }

    },

FileSaver.js

var img = document.createElement('img');

img.src = 'data:image/png;base64,' + base64String;

img.style.display = 'none';

document.body.appendChild(img);

img.click();

document.body.removeChild(img);

在移动端（Android和iOS）上下载图片，可以使用以下方法：

对于安卓（Android）：

首先，将base64的图片数据转换为字节数组。

byte[] imageData = Base64.decode(base64Data, Base64.DEFAULT);

然后，将字节数组保存为文件。

File file = new File(Environment.getExternalStorageDirectory(), "image.png");
FileOutputStream outputStream = new FileOutputStream(file);
outputStream.write(imageData);
outputStream.close();

最后，发送广播通知系统图库有新的文件可用。

Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
intent.setData(Uri.fromFile(file));
sendBroadcast(intent);

对于iOS（iOS 10+），使用以下方法：

首先，将base64的图片数据转换为NSData对象。

let imageData = Data(base64Encoded: base64Data)

然后，将数据保存到照片库中。

if let imageData = imageData {
    UIImageWriteToSavedPhotosAlbum(UIImage(data: imageData), nil, nil, nil)
}

请注意，对于iOS，你需要在info.plist文件中添加以下权限：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问您的照片库。</string>

以上是使用原生代码的方法，在移动端上下载图片。你可以根据你的应用程序框架和要求进行相应的修改和适配。

TechWhizKid参考GPT回答：

  • 可以试试用 JavaScript 在客户端生成一个可下载的链接。可以创建一个新的 "a" 标签，并将其 "href" 属性设置为你的 base64 编码的图像数据，然后模拟点击该链接来下载图像。

  • 在 Vue.js 中，可以将此逻辑包装在一个方法中，并在要下载图像时调用它。简单示例：

methods: {
  downloadImage(base64Data) {
    const link = document.createElement("a");
    link.href = `data:image/png;base64,${base64Data}`;
    link.download = 'Image.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

  • 移动端上，a 标签的 download 属性似乎不起作用。是由于移动设备的浏览器不支持这个属性，或由于安全性或隐私性的原因。在这种情况下，你可能需要采用不同的方法。

  • 可能的解决方案是在服务器端设置 Content-Disposition 头部，以提示浏览器将响应作为一个文件来处理，而不是在浏览器中打开它。头部可能如下所示：Content-Disposition: attachment; filename=filename.extension;。这可能要后端服务器的支持，并且可能不适用于所有情况，尤其是如果你是在客户端生成图像的话。

大致思路：
1、使用caniuse.com查看Android和iOS上支持的下载方式
2、根据支持的下载方式，使用HTML5的download属性和Blob对象来实现下载
提供参考示例代码，
代码示例中使用html2canvas来将HTML元素转换为canvas，并将canvas转换为base64格式的字符串。然后，将base64数据转换为Blob对象，并使用URL.createObjectURL()方法创建一个URL对象。最后，创建一个下载链接，并将URL对象设置为链接的href属性，将download属性设置为要下载的文件名，触发链接的点击事件来下载文件，并从文档中删除链接和撤销URL对象。

<a download="example.png" href="#" onclick="downloadImage()">Download Image</a>  
  
<script>  
function downloadImage() {  
  var image = document.getElementById("my-image");  
  var canvas = document.createElement("canvas");  
  canvas.width = image.width;  
  canvas.height = image.height;  
  var ctx = canvas.getContext("2d");  
  ctx.drawImage(image, 0, 0);  
  var base64Data = canvas.toDataURL("image/png");  
  var blob = dataURItoBlob(base64Data);  
  var url = URL.createObjectURL(blob);  
  var link = document.createElement("a");  
  link.href = url;  
  link.download = "example.png";  
  document.body.appendChild(link);  
  link.click();  
  document.body.removeChild(link);  
  URL.revokeObjectURL(url);  
}  
  
function dataURItoBlob(dataURI) {  
  var byteString = atob(dataURI.split(",")[1]);  
  var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];  
  var ab = new ArrayBuffer(byteString.length);  
  var ia = new Uint8Array(ab);  
  for (var i = 0; i < byteString.length; i++) {  
    ia[i] = byteString.charCodeAt(i);  
  }  
  return new Blob([ab], { type: mimeString });  
}  
</script>

#如有帮助，恭请采纳

答案参考ChatGPT Plus版，整理汇总。希望能帮助你解决问题
在移动端（安卓和iOS）上，使用JavaScript直接下载图片可能会受到一些限制。但是，你可以尝试以下方法在移动端上实现图片下载：

  1. 使用第三方库：一种常见的解决方案是使用第三方库，如FileSaver.js。它是一个用于在浏览器中保存文件的JavaScript库，支持在移动端上下载图片。你可以将生成的base64字符串转换为Blob对象，然后使用FileSaver.js库将其保存为文件。你可以在项目中引入该库，并使用以下代码保存图片：
var base64Data = "your_base64_image_data";
var blob = base64ToBlob(base64Data, 'image/png'); // 将base64转换为Blob对象
saveAs(blob, 'image.png'); // 使用FileSaver.js保存文件

function base64ToBlob(base64Data, contentType) {
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }

    return new Blob(byteArrays, { type: contentType });
}
  1. 使用HTML5下载属性（仅限安卓）：在安卓设备上，你可以创建一个隐藏的标签，然后使用下载属性（download）将其链接到生成的base64图像数据。然后，使用JavaScript模拟点击该链接以下载图片。请注意，这种方法在iOS设备上不起作用。
var base64Data = "your_base64_image_data";
var link = document.createElement('a');
link.href = 'data:image/png;base64,' + base64Data;
link.download = 'image.png';
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

这些方法应该能够在移动端上实现图片下载。请注意，对于iOS设备，由于安全限制，可能无法直接将图片保存到用户的相册中。用户需要手动保存图片到相册。

基于new bing部分指引作答：
在移动端（安卓和iOS）上，使用HTML5的<a>标签的download属性是无法直接下载图片的，因为移动设备的浏览器对于该属性的支持有限。不过，你可以通过使用JavaScript来实现在移动端下载图片到手机相册的功能。以下是一个示例代码：

// 假设你已经获取到了图片的base64编码
var base64Image = "data:image/png;base64,xxxxxxxxxxxx";

// 创建一个虚拟的a标签
var a = document.createElement('a');
a.href = base64Image;
a.download = 'image.png';

// 将a标签点击事件触发，以便开始下载
a.click();

这段代码首先创建了一个虚拟的<a>标签，然后将图片的base64编码作为链接（href）赋值给该标签。接下来，通过设置download属性为要保存的文件名（例如'image.png'），告诉浏览器这是一个要下载的文件。最后，使用a.click()方法触发点击事件，浏览器会开始下载该图片。

某些移动设备上的浏览器可能对这种下载方式有限制，可能会在用户确认下载之前要求用户进行一些额外的交互操作。因此，该方法可能并不适用于所有移动设备和浏览器。