javaScript解决手机浏览器下载为图片之后,图片漆黑无法保存的问题

pc端能正常下载图片并查看

手机移动端下载的图片全是黑色的并且无法保存,这个问题可能与移动浏览器的安全策略有关

解决办法:使用Blob对象和createObjectURL方法来创建一个临时URL,然后将其赋给链接的href属性下载:

        // 转blob函数function dataURLtoBlob(dataURL) {var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}           // 使用html2canvas将 HTML 元素转换为 Canvashtml2canvas(document.getElementById("myElementId"), {useCORS: true}).then(canvas => {// 获取Canvas的图像数据const imgData = canvas.toDataURL('image/png');const blob = dataURLtoBlob(imgData);// 创建一个链接元素var a = document.createElement('a');// 将数据URL设置为链接的href属性a.href = window.URL.createObjectURL(blob);// 设置下载的文件名a.download = '参观留念.png';// 模拟点击这个链接,触发下载a.click();// 释放Blob URLwindow.URL.revokeObjectURL(a.href);});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/162575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

anaconda安装配置

创建分区 conda create -n cpu 安装Cpu版本 https://pytorch.org/ conda install pytorch torchvision torchaudio cpuonly -c pytorch 激活环境 conda activate cpu 验证 退出当前分区 conda deactivate 安装GPU版本 创建分区conda create -n gpu 激活环境 conda…

Java面向对象(高级)-- final关键字的使用

文章目录 一、 final的意义二、 final的使用(1) final修饰类(2) final修饰方法(3) final修饰变量1. 修饰成员变量1.1 举例11.2 举例2 2. 修饰局部变量2.1 举例12.2 举例2 (4)final搭…

java协程操作mysql数据库

我的项目: nanshaws/nettyWeb: 复习一下netty,并打算做一个web项目出来 (github.com) 最近在项目中分别添加了虚拟线程操作mysql数据库,和用协程操作mysql数据库 同理先跟我这个博客操作一下前面的:就单纯代码的时候进行修改&a…

TikTok与精神健康:社交媒体在压力时代的作用

在当今数字化和社交化的时代,社交媒体已成为人们生活中不可或缺的一部分。其中,TikTok作为一款备受欢迎的短视频应用,不仅改变了人们的娱乐方式,也对精神健康产生了深远的影响。 本文将深入探讨TikTok在压力时代对精神健康的作用…

2023年中国油田工程建设市场规模现状及行业竞争分析[图]

油田工程建设是在确定油气田有开发生产的价值的基础上,进行系统的工程建设,油田工程建设包括井场建设、管道施工、土石方工程、道路建设及绿化等服务。 油田工程建设主要内容 资料来源:共研产业咨询(共研网) 油田服务…

oapi-codegen 安装和使用

背景描述 oapi-codegen 是代码自动生成工具,其大致逻辑是:(1)编写遵循 openAPI 规范的 yaml 格式 api 接口文档;(2)使用 oapi-codegen 使用 yaml 文件生成 gin 框架的 server 端代码。 除此以…

编辑 | 古代汉语知识

文章目录 文字通假字古今字异体字(了解) 词汇古汉语中的单音词与双音词(掌握)词的本义与引申义的特点和主要差异(掌握)词的古义与今义的特点和主要差异(掌握)与现代汉语用法相同与现…

反向传播BP算法

神经网络的反向传播 反向传播机制与代码微分引擎与代码原理阐述 如需转载,请注明出处! 如有帮助点赞收藏关注! 反向传播机制与代码 这里主要介绍反向传播是如何运作的,代码中会加注释,便于大家理解。 在训练神经网络时…

抖音商城小程序源码系统 附带完整的搭建教程

大家好啊,今天小编来给大家分享一款抖音商城小程序源码系统。这可是当下最热门的的项目之一。。抖音作为国内最大的短视频平台之一,拥有庞大的用户群体和丰富的社交功能。为了满足用户在抖音上购物和交易的需求,抖音商城小程序应运而生。 以…

租车系统开发/多功能租车平台微信小程序源码/汽车租赁系统源码/汽车租赁小程序系统

源码介绍: 多功能租车平台微信小程序源码,作为汽车租赁、摩托车租车平台系统源码,是小程序系统。基于微信小程序的汽车租赁系统源码。 开发环境及工具: 大等于jdk1.8,大于mysql5.5,idea(eclip…

拆解:淘宝客新玩法之微信淘礼金创建怎么做

最近看到一种新的淘宝客玩法,迫不及待的想分享给大家。微信公众号查券大家都不陌生,也有不少人都在做这个。最近看到有人在做微信公众号创建淘礼金。之所以说这个玩法新是因为目前大多数淘客还在做返利。返利有周期长、提现有门槛等痛点。 微信公众号创建…

基于Springcloud微服务框架智慧工地系统源码

建筑行业快速发展,各建筑工程的建设规模在不断扩大,各岗位工作人员的工作内容所涉及的方面也越来越广泛。随着信息技术水平不断提高,人工记录的方式已经不能够满足大项目的管理要求,就此,创造出一种新型的施工管理技术——智慧工地…

携程token

网址:https://flights.ctrip.com/ 记录一下这个要我狗命的token 原本以为解决验证码就能继续查机票信息,奈何太年轻,或者说原本以为这个头部信息的token不重要,其实还是很重要的。 关于查价格 ,如果说查询频繁之后就…

小型内衣裤洗衣机哪个牌子好?性价比小型洗衣机推荐

内衣内裤应该如何清洗才能实现在不伤衣的同时有能够洗干净呢?其实除了使用温水搭配手洗以外,还有一些清洗方式,那就是选择一台专门为内衣定制的内衣洗衣机。目前内衣洗衣机由于精致小巧,方便安装,方便使用,…

关于内存与实际数据之间一些理解

//// 16位无符号强转有符号 测试用例// 由于第一位表示正负的位是0,强制转换有符号后,仍然是0,所以无影响 0-32767 (3276715个1,最左边符号位仍然是0)之间都是无影响的unsigned short* pUS new unsigned s…

分布式幂等

分布式幂等 在分布式系统、网络通信和数据库操作中,幂等性是一个非常重要的概念,特别是在面对可能发生网络故障、消息重复、或者系统崩溃等情况时。 举个简单的例子,考虑一个银行转账的操作。如果转账操作是幂等的,那么无论你执…

PC分页操作以及loading效果

page-size 每页显示条目个数 current-page 当前页数 total 数据总数 current-change【currentPage 改变时会触发】 切换分页时会先加载,等在接口数据,接口返回,加载会关闭(在获取接口数据完毕哪里加上this.loadingfalse&#xff0…

低权限(无权限)时如何在mysql客户端控制台的大量输出中快速定位mysql死锁或慢sql

查看mysql的查看死锁的方式很多,但很多时候我们普通开发者的权限比较低,无法执行某命令。比如本次就准备使用 SHOW ENGINE INNODB STATUS;命令,但客户端提示权限不够。后来本人找到了另一条低权限的命令 show full PROCESSLIST;但是show fu…

比例减压阀放大器选型

控制阀型如比例插装阀、比例方向阀、比例压力阀、比例流量阀、比例叠加阀等,安装方式有插式及导轨卡槽式,输入指令可选0-10V、4-20mA、10V、0-5V,输出电流可选最大3A,适用各大品牌不带电反馈常规比例阀匹配度,控制比例…

1553. 吃掉 N 个橘子的最少天数(记忆化+贪心优化)

Problem: 1553. 吃掉 N 个橘子的最少天数 文章目录 题目思路Code 题目 使得 n 变成0的操作有三种方式 : 吃掉一个橘子。如果剩余橘子数 n 能被 2 整除,那么你可以吃掉 n/2 个橘子。如果剩余橘子数 n 能被 3 整除,那么你可以吃掉 2*(n/3) 个…